Ajax—Transfer files

Single file upload:
Points to note:上传文件的请求路径必须是绝对路径

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
 <title></title> 
</head> 
<body> 
       <form id="uploadForm" enctype="multipart/form-data"> 
             文件:<input id="file" type="file" name="file"/> 
       </form> 
            <button id="upload">上传文件</button> 
</body> 
      <script type="text/javascript"> 
             $(function () {
     
      
               $("#upload").click(function () {
     
      
               var formData = new FormData($('#uploadForm')[0]); 
                $.ajax({
     
      
                type: 'post', 
                url: "http://192.168.1.101:8080/springbootdemo/file/upload", //上传文件的请求路径必须是绝对路劲
                data: formData, 
                cache: false, 
                processData: false, 
                contentType: false, 
            }).success(function (data) {
     
      
                alert(data); 
           }).error(function () {
     
      
                alert("上传失败"); 
       }); 
    }); 
 }); 
</script> 
</html>

Multiple file uploads:
Points to note:Ajax实现多文件的上传（这个是多选上传，关键是multiple="multiple"这个属性，另外使用的接口也是多文件上传的接口）

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
 <title></title> 
</head> 
<body> 
        <form id="uploadForm" enctype="multipart/form-data"> 
             文件:<input type="file" name="file" multiple="multiple"/><br> 
        </form> 
            <button id="upload">上传文件</button> 
</body> 
<script type="text/javascript"> 
         $(function () {
     
      
             $("#upload").click(function () {
     
      
              var formData = new FormData($('#uploadForm')[0]); 
          $.ajax({
     
      
          type: 'post', 
              url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles", 
              data: formData, 
              cache: false, 
              processData: false, 
              contentType: false, 
         }).success(function (data) {
     
      
            alert(data); 
         }).error(function () {
     
      
             alert("上传失败"); 
          }); 
     }); 
 }); 
</script> 
</html>

Ajax—Transfer files

Guess you like