js 多文件上传(前后端实现)

  |   0 评论   |   0 浏览

前端代码实现

<!DOCTYPE HTML>
<html>
   <head></head>
   <body>
        <form id="upload-form" method="post">
            files1: <input type="file" id="files1" name="files1" multiple>
            files2: <input type="file" id="files2" name="files2" multiple>
            <button id="btn">上传</button>
        </form>
   </body>
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script>
         $(function(){
             $("#btn").click(function(){
                 var files1 = $('#files1').prop('files')
                 var files2 = $('#files2').prop('files')
                 console.log(files1);
                 console.log(files2);
                 var data = new FormData();
                 for (var i = 0 ;i  < files1.length ; i ++){
                     data.append('files1',files1[i]);
                 }
                 for (var i = 0 ;i  < files2.length ; i ++){
                     data.append('files2',files2[i]);
                 }
                 $.ajax({
                     url:'upload',
                     type:'POST',
                     data: data,
                     processData: false,
                     contentType: false,
                     success:function(data){
                         console.log(data);
                     }
                 })
                 return false;
             })
         })
   </script>

</html>

后端实现

@RestController
public class UploadController {

    @PostMapping("upload")
    public String upload(MultipartFile[] files1,MultipartFile[] files2){
        System.out.println(files1);
        System.out.println(files2);
        return "";
    }

}

标题:js 多文件上传(前后端实现)
作者:zh847707713
地址:http://lovehao.cn/articles/2020/12/14/1607934200951.html