SpringMVC + AJAX 实现多文件异步上传

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

转自：https://www.jianshu.com/p/f3987f0f471f

今天，我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能。基本的代码还是沿用上篇文章中所用到的项目，需要的朋友可以点击前面的链接查看。在这里只贴出关键代码。

首先我们要准备一个 JS 文件，即：ajaxfileupload.js，它需要用到 jQuery，所以我们还需要准备 jQuery 的库，两个文件在文末尾都有链接提供下载。

JSP 关键代码：

<li>

    <div>

    <input type="file" id="file1" name="imgFile" /><span class="uploadStatus"></span>

    </div>

    <div>

    <input type="file" id="file2" name="imgFile" /><span class="uploadStatus"></span>

    </div>

    <input type="button" onclick="ajaxUpload();" value="上传文件"/><br />

</li>

两个 file input 标签的 name 是一致的“imgFile”，方便 SpringMVC 在 controller 层接收。每个 input 标签后面跟一对 span 标签，用于显示上传结果。
最后提供一个 button 按钮，点击事件 onclick 执行下面我们即将写的 JS 函数。

JS 关键代码：

<script src="js/jquery-2.1.0.js" type="text/javascript"></script>

<script src="js/ajaxfileupload.js" type="text/javascript"></script>

<script type="text/javascript">

// 多文件异步上传

function ajaxUpload(){

    $("input[type=file]").each(function(){

    var fileEleId = $(this).attr("id");

    // 单个文件的异步上传

    $.ajaxFileUpload({

        url : 'user/ajaxUpload', // 用于文件上传的服务器端请求地址

        fileElementId : fileEleId, // 对应文件上传标签的 id 属性

        type : 'post',

        dataType : 'text', //返回值类型

        success : function(data, status) {

        document.getElementById(fileEleId).nextSibling.innerHTML ="上传成功";

        },

        error : function(data, status, e) {

        document.getElementById(fileEleId).nextSibling.innerHTML ="上传失败";

        }

    });

    });

}

</script>

在循环中引用了 $.ajaxFileUpload 方法，这就是用来异步上传文件用的方法啦！看结构是不是与 jQuery 的 $.ajax 很像呢？需要注意的是 fileElementId 这个参数，用于指定即将上传文件的 input file 的标签 ID。最后在 success 函数中指定回传状态的显示结果就可以了。JSP 部分的代码到此结束，是不是很简单呢！

然后再来看对应 Controller 层代码，我们接着在上篇文章中用到的 UserController 类中写映射方法。
Java 代码：

    /**

     * 文件异步上传请求处理

     * @param request

     * @return 上传结果：success、failed

     */

    @RequestMapping(value = "ajaxUpload", method = RequestMethod.POST)

    public @ResponseBody

    String ajaxUpload(HttpServletRequest request) {

        MultipartHttpServletRequest multipartRequest

                = (MultipartHttpServletRequest) request;

        // 获取input file对应的 name 的文件

        MultipartFile mFile = multipartRequest.getFile("imgFile");

        String path = "D:\\testFile\\"; // 保存的文件位置

        String fileName = mFile.getOriginalFilename();

        // 上传的图片所保存在服务器上的位置

        String outPath = path + fileName;

        try(OutputStream outputStream = new FileOutputStream(outPath);

            InputStream inputStream = mFile.getInputStream();){

            byte[] buffer = new byte[4096];

            int length = 0;

            while((length = inputStream.read(buffer)) != -1){

                outputStream.write(buffer, 0, length);

            }

        } catch (IOException ioe){

            logger.info("File Upload Exception...", ioe);

            return "failed";

        }

        return "success";

    }