ajax文件上传示例

最新推荐文章于 2021-08-06 10:56:56 发布

noodzhan

最新推荐文章于 2021-08-06 10:56:56 发布

阅读量188

点赞数

本文链接：https://blog.youkuaiyun.com/guidgeek/article/details/106815780

版权

本文详细介绍了如何使用Ajax实现文件上传功能，包括前端组件的选用，上传脚本的编写，后台控制器的设计以及在Spring MVC框架中的配置步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 前端组件：

  <input type="file" name="fileName3" id="fileName3">
  <input type="button" class="btn btn-secondary" onclick="sendToEnd()">上传论文</input>

2. 脚本：

 function sendToEnd(){ //在这里进行ajax 文件上传 用户的信息
    alert("tset");
    var $file1 = $("input[name='fileName3']").val();//用户文件内容(文件)
    // 判断文件是否为空
    if ($file1 == "") {
      alert("请选择上传的目标文件! ")
      return false;
    }
    //判断文件类型,我这里根据业务需求判断的是Excel文件
    // var fileName1 = $file1.substring($file1.lastIndexOf(".") + 1).toLowerCase();
    // if(fileName1 != "xls" && fileName1 !="xlsx"){
    //   alert("请选择Execl文件!");
    //   return false;
    // }
    //判断文件大小
    var size1 = $("input[name='fileName3']")[0].files[0].size;
    if (size1>104857600) {
      alert("上传文件不能大于100M!");
      return false;
    }

    boo1 = true;
    var type = "file";
    var formData = new FormData();//这里需要实例化一个FormData来进行文件上传
    formData.append(type,$("#fileName3")[0].files[0]);
    $.ajax({
      type : "post",
      url : "/clazz/upload/end",
      data : formData,
      processData : false,
      contentType : false,
      success : function(data){
        if (data) {
          alert("文件上传成功!");
        }else{
          alert("文件上传失败!");
        }}
    });
  }

3. 控制器

@RequestMapping("/upload/end")
    @ResponseBody
    public Boolean uploadEnd(@RequestParam("file") MultipartFile file, HttpServletRequest req)
            throws IllegalStateException, IOException {

        // 判断文件是否为空，空则返回失败页面
        if (file.isEmpty()) {
            return false;
        }
        // 获取文件存储路径（绝对路径）
        String path = req.getServletContext().getRealPath("/WEB-INF/");
        HttpSession session = req.getSession();
        Student student = (Student)session.getAttribute("user");
        path+="/后期/";
        path += student.getSnumber();
        // 获取原文件名
        String fileName = file.getOriginalFilename();
        // 创建文件实例
        File filePath = new File(path, fileName);
        // 如果文件目录不存在，创建目录
        if (!filePath.getParentFile().exists()) {
            filePath.getParentFile().mkdirs();
            System.out.println("创建目录" + filePath);
        }
        // 写入文件
        file.transferTo(filePath);


        //System.out.println(filePath.toString().split("/WEB-INF/"));
        String[] split = filePath.toString().split("WEB-INF");
        System.out.println("url:"+split[1]);
        //将url写入到数据库
        student.setEndUrl(split[1]);
        Example example = new Example(Student.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("id", new Long(student.getId()));
        example.and(criteria);
        int flag = studentMapper.updateByExampleSelective(student,example);

        return true;
    }

4. 在springmvc.xml配置

    <bean id="multipartResolver"
       class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
     <!--上传文件的最大大小，单位为字节 -->
     <property name="maxUploadSize" value="17367648787"></property>

     <!-- 上传文件的编码 -->
     <property name="defaultEncoding" value="UTF-8"></property>
 </bean>