使用ajax提交form表单实现文件上传

在使用form表单的时候,一旦点击提交触发submit事件，一般会使得页面跳转，页面间的跳转等行为的控制权往往在后端，后端会控制页面的跳转及数据传递，但是在某些时候不希望页面跳转，或者说想要将控制权放在前端，或者想在前台接收支持IOS或安卓的json数据格式，这时候就需要使用ajax提交。

使用ajax实现文件上传：

--01：--导入文件上传的jar包：

    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.3</version>
      </dependency>
      <dependency>
        <groupId>org.apache.commons</groupId>
        <artifactId>commons-lang3</artifactId>
        <version>3.3.2</version>
      </dependency>
      <dependency>
          <groupId>commons-io</groupId>
          <artifactId>commons-io</artifactId>
          <version>2.4</version>
      </dependency>

 --ajax提交form表单所以要返回json数据格式需要导入转换json的jar包

<!--转换JSON-->
      <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
      <dependency>
          <groupId>com.fasterxml.jackson.core</groupId>
          <artifactId>jackson-databind</artifactId>
          <version>2.9.5</version>
      </dependency>

 --编写文件上传的jsp中的表单，使用form提交文件上传需要使用二进制的方式传输所以不要忘了在form标签中添加：enctype="multipart/form-data"

<div style="align-items: center;align-content: center;">
    <h1>文件上传</h1>
    <form id="form" method="post" enctype="multipart/form-data">
        <p>请选择要上传的文件:</p>
        <input id="file" name="file" type="file" multiple="multiple"/>
        <br>
        <input id="upload" name="upload" type="button" value="上传">
    </form>
</div>

--编写提交文件上传的jq的ajax

<script type="text/javascript">
    $(window).ready(function () {
       $("#upload").click(function () {
           var formData = new FormData($("#form")[0]);//获取表单中的文件
           alert(formData);
           $.ajax({
               url:"upload",//后台的接口地址
               type:"post",//post请求方式
               data:formData,//参数
               cache: false,
               processData: false,
               contentType: false,
               success:function (data) {
                   alert(data.newFileName);
               },error:function () {
                   alert("操作失败~");
               }

           })
       });
    });


</script>

  --在springmvc的配置文件中配置MultipartResolver用于文件上传

<!-- 配置MultipartResolver,用于上传文件 -->
        <bean id = "multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"></property>
        </bean>

  --编写提交文件上传的jq的ajax

@RequestMapping("/upload")
    @ResponseBody
    public Object upload(MultipartFile[] file, HttpSession session) {
        System.out.println(file);
        //获取服务器上传的文件路径
        String dir =  session.getServletContext().getRealPath("/upload");
        System.out.println(dir);
        Map<String,Object> map=new HashMap<>();
        for (MultipartFile files : file){
            System.out.println("文件类型:"+files.getContentType());
            //获取文件名
            String filename = files.getOriginalFilename();
            //获取文件的后缀名
            String suffix = filename.substring(filename.lastIndexOf(".") + 1);
            //给需要上传的文件起别并
            String newFileName=String.valueOf(System.currentTimeMillis())+"."+suffix;
            System.out.println("文件名:"+newFileName);
            System.out.println("文件后缀:"+suffix);
            System.out.println("文件大小:"+files.getSize()/1024+"KB");
            map.put("newFileName",newFileName);
            //创建要保存文件的路径
            File dirFile = new File(dir,filename);
            if (!dirFile.exists()){
                dirFile.mkdirs();
            }
            try {
                //将文件写入创建的路径
                files.transferTo(dirFile);
                System.out.println("文件保存成功~");
            } catch (IOException e) {
                e.printStackTrace();
            }


        }

        return map;

    }

    注意：

• 在常用方式中，点击的登录按钮的type为"submit"类型；
• 在常用方式中，form的action不为空；
• ajax方式中需要注意的是$.ajax方法中的参数：dataType和data