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);
 }
 })
}