我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。

网上看到很多Spring的多文件上传解决方案都是在页面里写上多个input,这样并不能符合客户的要求,用户需要一个输入框内,选择多个文件直接上传。下面就是完美解决方案:

一、Spring后台

正常的文件上传配置就不贴出来了,很简单的

    @RequestMapping(value = "/park/pics/{id}", method = RequestMethod.POST)
    @ResponseBody
    @RequestLog(permission = "perparkupdate")//本系统作操作记录用的
    public Object uploadPics(MultipartFile[] uploadFiles, @PathVariable("id") int id, HttpServletRequest request) {
        Map map = new HashMap<>();
        //文件保存的目录
        String dir = "park_pic";
        String requestId = (String) request.getAttribute("requestId");
        //本系统里是和园区绑定
        Park park = parkService.find(id);
        for(MultipartFile uploadFile:uploadFiles){
            String filename = uploadFile.getOriginalFilename();// 获取文件名
            String title = filename;
            String type = filename.substring(filename.lastIndexOf("."));
            //......
            //这是做保存文件的操作
            fileService.upload(uploadFile, dir, cur+type, request);
        }
        //操作记录
        fateRequestService.update(requestId, "批量上传园区实景", false);
        map.put(Constants.SUCCESS, true);
        return map;
    }

二、页面

(1)html

重点在于,添加input上添加multiple="multiple"


(2)js

JQuery请求比单文件上传多了processData : false, contentType : false,两个参数;需要手动把file文件列出来,组成formData,传递到ajax中。

    $("#files").change(function () {
        formData = new FormData();
        formData.append("uploadType", 1);//这是我系统里的参数
        var files = $(this)[0].files;
        for( var i=0;i<files.length;i++ ){
            formData.append("uploadFiles", files[i]);//列出文件
        }
        multiUpload(formData);
    });
    function multiUpload(formData) {
        $.ajax({
            url: "park/pics/"+$("#id").val(),
            type: 'post',
            dataType: 'json',
            data: formData,
            processData : false, //必须false才会自动加上正确的Content-Type
            contentType : false,
            success: function (data) {
                if (data.success) {
                    location.reload();
                } else {
                }
            },
            error: function (data) {
                response_error(data);
            }
        });
    }

三、总结

最终的表单数据其实和页面中放多个input是相同的,只不过,幻幻通过JS处理,把模拟的操作隐藏了起来,让用户看起来就是一个文件选择框里选了多个文件一起上传了一样。