Question

我有一个表格，可以上传多个图像。但是当在控制台上检查时。控制台中仅显示第一张图像。

console.log C:\fakepath\avatar.jpg

HTML

<form name="addListingForm" id="addListingForm" action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="uploadImage" id="uploadImage" accept="image/*" multiple="" onChange="makeFileList();">
    <div id="fileList">No Image Selected</div>
</form>
<button type="button" id="btnUpload" class="btn btn-primary">Upload</button>

JS

$("#btnUpload").on("click",function(){
    var uploadImage = $("#uploadImage").val();
    var fd = new FormData();
    var files = $('#uploadImage')[0].files[0];
    fd.append('file',files);
    console.log(files)
    var params = JSON.stringify(files);
    $.ajax({
        // The Image will be upload using ajax tp DB
    });
});

function makeFileList() {
    var input = document.getElementById("uploadImage");
    var ul = document.getElementById("fileList");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < input.files.length; i++) {
        var li = document.createElement("li");
        li.innerHTML = input.files[i].name;
        ul.appendChild(li);
    }
    if (!ul.hasChildNodes()) {
        var li = document.createElement("li");
        li.innerHTML = 'No Image Selected';
        ul.appendChild(li);
    }
}

Answer 1

$("#btnUpload").on("click", function() {
  var uploadImage = $("#uploadImage").val();
  var files = $('#uploadImage')[0].files;

  var promises = uploadImages(files);
  $.when(...promises).done(function(...args) {
    //handle the resulting data here which is an array containing the data
    console.log(args)
  })
});

function uploadImages(files) {
  return $.map(files, function(file) {
    var formdata = new FormData();
    formdata.append("image", file, file.name);

    var settings = {
      "url": "https://api.imgbb.com/1/upload?key=516c7e69e9c260a2a00eacceafdb1d62",
      "method": "POST",
      "timeout": 0,
      "processData": false,
      "mimeType": "multipart/form-data",
      "contentType": false,
      "data": formdata
    };

    return $.ajax(settings).then(function(res) {
      var result = JSON.parse(res)

      return result.data.url
    })
  })
}

function makeFileList() {
  var input = document.getElementById("uploadImage");
  var ul = document.getElementById("fileList");
  while (ul.hasChildNodes()) {
    ul.removeChild(ul.firstChild);
  }
  for (var i = 0; i < input.files.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = input.files[i].name;
    ul.appendChild(li);
  }
  if (!ul.hasChildNodes()) {
    var li = document.createElement("li");
    li.innerHTML = 'No Image Selected';
    ul.appendChild(li);
  }
}

<form name="addListingForm" id="addListingForm" action="" method="POST" enctype="multipart/form-data">
    <input type="file" name="uploadImage" id="uploadImage" accept="image/*" multiple="" onChange="makeFileList();">
    <div id="fileList">No Image Selected</div>
</form>
<button type="button" id="btnUpload" class="btn btn-primary">Upload</button>

如何在JS中一次上传多张图片？

1 个答案: