在SSM框架中使用AJAX实现多文件上传

﹏ヽ暗。殇╰゛Y 2022-05-21 05:05 204阅读 0赞

今天来学习一下在SSM框架中使用ajax实现文件的上传。

1.首先我们需要一个搭建好的SSM框架项目，这个在这篇文章里不是重点，自行先搭建好需要的项目。

这里我是用的jsp页面来和后台接口关联，在jsp文件中我们需要一个form表单，请求方法为POST,enctype="multipart/form-data",设置这样的一些属性，在表单的子标签里面要一个type=“file”的input标签；像这样的<input type="file" id="file" name="file"/> ，当然也可以指定multiple="multiple"，这样就可以支持多个文件的上传了。除了file类型的标签，我们还需要一个辅助的标签来响应ajax请求，一般来说就是用最简单的button类型的input标签了，记住 这里的ipnut标签的类型不能写submit，否则就直接是表单的提交了，和咱们的ajax没啥关系了。

我这里使用了jquery的库，所以导了一个jquery的js包

下面的就直接贴JSP代码吧，方便直观！

<%--
      Created by IntelliJ IDEA.
      User: admin
      Date: 2018/6/28
      Time: 20:53
      To change this template use File | Settings | File Templates.
    --%>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <script type="text/javascript" src="../lib/js/jquery-1.9.0.min.js"></script>
        <title>文件上传</title>
    </head>
    <body>
        <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>
    </body>
    <script>
        $(window).ready(function () {
            $("#upload").click(function () {
               var formData = new FormData($('#form')[0]);//获取表单中的文件
               //ajax请求
               $.ajax({
                   url:"/file/upload",//后台的接口地址
                   type:"post",//post请求方式
                   data:formData,//参数
                   cache: false,
                   processData: false,
                   contentType: false,
                   success:function (data) {
                       alert(data);
                   },error:function () {
                       alert("操作失败~");
                   }
               })
            });
        });
    </script>
    </html>

再看下前面的JSP页面运行后长啥样吧！

![70][]

好了，前面的事情做完了，接着来说说后台的处理。

2.编写文件上传的后台处理接口，咱们使用的SSM框架，所以只需要在controller层写一个uploadFileController类就行了，这个地方也没啥好说的直接看代码和注释吧！

package com.ssm.controller;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.multipart.MultipartFile;
    
    import java.io.File;
    import java.io.IOException;
    
    /**
     * created by viking 2018/06/28
     * 文件上传接口
     */
    @RestController
    @RequestMapping("file")
    public class UploadFileController {
    
        @RequestMapping(value = "upload", method = RequestMethod.POST)
        public String upload(@RequestParam("file") MultipartFile[] files){//支持多个文件的上传
            //实例化一个文件存放的目录地址
            String dir = "F:/uploadFile/";
            for (MultipartFile file : files){
                System.out.println("文件类型:"+file.getContentType());
                String filename = file.getOriginalFilename();
                String suffix = filename.substring(filename.length() - 3);
                System.out.println("文件名:"+filename);
                System.out.println("文件后缀:"+suffix);
                System.out.println("文件大小:"+file.getSize()/1024+"KB");
                //创建要保存文件的路径
                File dirFile = new File(dir,filename);
                if (!dirFile.exists()){
                    dirFile.mkdirs();
                }
                try {
                    //将文件写入创建的路径
                    file.transferTo(dirFile);
                    System.out.println("文件保存成功~");
                } catch (IOException e) {
                    e.printStackTrace();
                }
    
    
            }
            return "OK";
        }
    }

运行一下，试试上传的结果。

如图所示：

![70 1][]

文件所在目录的结果：

![70 2][]

结果完美的将我们上传的文件保存在本地了。

大概就是这些了，如果大家觉得有问题的地方可以留言，我们一起讨论。

如果有不正确的地方欢迎各路大神指教~~

[70]: /images/20220521/9a1e14a2403e478bbffff0202538d9cc.png
[70 1]: /images/20220521/1f9a89725d4f42e380c9a8d0068980c0.png
[70 2]: /images/20220521/5eb186b7f38b4faf8ed1a65c81754480.png