springmvc异步上传及多文件上传

柔光的暖阳◎ 2021-10-20 00:00 501阅读 0赞

上传文件的基本配置等在[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插件：![1602537-20190810095014675-752246068.png][]

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

![1602537-20190810095332486-994033339.png][]

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

js异步代码：

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

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

转载于:https://www.cnblogs.com/Zs-book1/p/11330565.html

[springmvc]: https://www.cnblogs.com/Zs-book1/p/11328796.html
[1602537-20190810095014675-752246068.png]: /images/20211019/bd9e472ec7f24b3c8c4fbb4a48af8763.png
[1602537-20190810095332486-994033339.png]: /images/20211019/99dd995d17a24d80af789793a5893f07.png