JS-上传多张图片-支持拖动设置顺序-跨域上传

秒速五厘米 2022-05-16 08:46 203阅读 0赞

#### 功能 ####

1.上传多张图片，放弃传统input.file形式上传，自定义数组保存文件；  
2.可一次性选择多张图片，可追加图片，图片可以预览；  
3.可拖动图片，顺序默认从左0开始，采用jquery-ui实现；  
4.可删除单个图片，或清空所有图片；  
5.跨域上传；  
6.防止按钮重复提交；  
7.判断文件类型，过滤非图片文件；

#### html ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>上传多张图片文件,可拖动图片排序</title>
            
            <link rel="stylesheet" href="http://d3.itsaoko.com/template/source/1880821582xN.css">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" >
            <style> .container { width: 705px; margin: 0 auto; } .img_wrapper { width: 100%; min-height: 300px; display: flex; flex-wrap: wrap; } .dragWrapper { position: relative; display: inline-block; } .btn_wrapper { display: flex; justify-content: center; } .btn,.clearBtn { margin-right: 50px; } </style>
        </head>
        <body>
            <div class="container">
                <div class="img_wrapper">
    
                </div>
                <div class="btn_wrapper">
                    
                    <input type="file" name="files" id="files" multiple style="display: none;" data-name="files1"/>
                    <button class="btn">选择文件</button>
                    <button class="clearBtn">清空文件</button>
                    <button class="uploadBtn">上传文件</button>
                </div>
            </div>
    
        </body>
        
        <script src="http://d3.itsaoko.com/template/source/18808220295.js"></script>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
    
    </html>

后端使用Spring MVC接收文件

#### TestController ####

/** * @author wzx * @time 2018/8/4 */
    @Controller
    @RequestMapping("/test")
    public class TestController { 
    
        @RequestMapping("/uploads")
        @ResponseBody
        @CrossOrigin(origins = "*", methods = {RequestMethod.POST, RequestMethod.OPTIONS},
                allowedHeaders = {
       "Content-Type", "X-Requested-With", "accept", "Origin", "Access-Control-Request-Method", "Access-Control-Request-Headers"},
                exposedHeaders = {
       "Access-Control-Allow-Origin", "Access-Control-Allow-Credentials"})
        public String upload(MultipartFile[] files, HttpServletRequest request) {
            System.out.println(files.length);
            Map<String, MultipartFile> fileMap = ((DefaultMultipartHttpServletRequest) request).getFileMap();
            System.out.println("fileMap size:" + fileMap.size());
            fileMap.forEach((k,v)-> System.out.println(k));
            return "ok";
        }
    }

两点说明：  
1.可以使用MultipartFile\[\]数组接收，缺点是files只能跟前端的参数名对应；使用**DefaultMultipartHttpServletRequest.getFileMap()**获取参数名和对应文件，这里可以处理文件的顺序；  
2.**@CrossOrigin**注解处理跨域请求；

#### 效果 ####

![这里写图片描述][70]

[70]: /images/20220516/eaaeeddd698a4cfc8756e00fe8a63b0b.png