springmvc异步上传及多文件上传

上传文件的基本配置等在springmvc实现文件上传下载中已经写过了，在上一篇中写的是单文件上传，这一篇主要写的是多文件异步上传；

应用场景：上传相册功能，商城上传缩略图等，

这些功能需要用户在选中图片后就知道是否上传成功，而且图片的数量可能有多个，因此需要实现异步多文件下载。

后台的功能需要改动的不多：

@Controller
public class FileController {


    private static final String PATH="H:\IdeaSpace\ce809\out\static\upload\";
    @RequestMapping("/file")
    @ResponseBody
    public List<String> file(@RequestParam(value = "img") MultipartFile[] files, HttpServletRequest request) {
        /*创建集合对象，用来存放上传后生成文件名*/
        List<String> fileNames = new ArrayList<>();
        for (int i = 0; i < files.length; i++) {
            MultipartFile file = files[i];
            /*生成文件名*/
            StringBuilder filePath = new StringBuilder(PATH);
            filePath.append(UUID.randomUUID().toString());
            String fileName = file.getOriginalFilename();
            filePath.append(fileName.substring(fileName.lastIndexOf(".")));

            File localFile = new File(filePath.toString());

            if (!localFile.getParentFile().exists())
                localFile.mkdirs();
            try {
                file.transferTo(localFile);
               /*上传成功，将文件名添加到集合中*/
                fileNames.add(localFile.getName());
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
//        返回集合
        return fileNames;
    }
}

实现多文件上传，只需要在后台传参时使用一个数组接参就好了，下面是前端的代码，要实现异步上传，需要一个js插件：

前端实现多文件上传，可以使用多个input标签，用一样的name来达到效果：

不过这种方法效率不高，因为如果需要上传的照片、文件数量多时，比较麻烦，因此就想有没有方法能在一个input框中选择文件时通过ctrl键选中多个文件：

<form id="fileUpForm" method="post" enctype="multipart/form-data">
    <!--multiple="multiple"实现选择多个文件-->
    <input type="file" name="img"  multiple="multiple">
    <input type="button" onclick="fileUp()" value="上传">
</form>
<div id="img"></div>

js异步代码：

<script>
    function fileUp() {
        /*ajaxSubmit是jquery.form.js封装好的方法*/
        $("#fileUpForm").ajaxSubmit({
            type:"post",
            url:"${pageContext.request.contextPath}/file",
            success:function (data) {
                $.each(data,function (index, item) {
                    $("#img").append('<img src=static/upload/'+item+' width="100px"/>');
                })
            },
            error:function (xhr, msg) {
                alert(msg);
            }
        })
    }
</script>

 上面是以上传图片为例，异步上传后，会将服务器上生成的问件名的集合返回，方便用户查看是否上传成功，如果有其它类型文件，可以通过后缀判断来生成不同的标签。如果想要在选中文件后，直接上传，可以设置input标签change=‘fileUp()’

也可以不使用插件，使用jquery实现：

function fileUp() {
    var formData = new FormData();
    var files = document.getElementById("file").files;
    $.each(files,function (index, item) {
        formData.append("img", item);
    })
   $.ajax({
        type:"post",
        contentType:false,
        data:formData,
        processData : false,
        url:"${pageContext.request.contextPath}/file",
        success:function (data) {
            $.each(data,function (index, item) {
                $("#img").append('<img src=static/upload/'+item+' width="100px"/>');
            })
        },
        error:function (xhr, msg) {
            alert(msg);
        }
    })
}