js+ajax实现多张图片上传 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jq+ajax 实现多张图片上传</title>
</head>

<body>
  <div class="item">
    <input type="file" name="files" id="file" multiple="multiple" accept="image/png,image/jpg,image/gif,image/JPEG">
  </div>
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $('#file').on("change", function () {
      var formData = new FormData();
      for (var i = 0; i < $("#file")[0].files.length; i++) {  //循环获取上传个文件
        formData.append("file", $("#file")[0].files[i]);
      }
      $.ajax({
        "url": "", // 上传地址
        "data": formData,
        "dataType": "json",
        "type": "post",
        "contentType": false, //上传文件一定要是false
        "processData": false,
        "success": function (obj) {
          if (obj.state == 1) {
            console.log(obj)
          } else {
            console.log(obj.message)
          }
        }
      });
    })
  </script>
</body>

</html>

 

posted @ 2021-02-20 17:49  空~白  阅读(423)  评论(0)    收藏  举报