Question

我有一个输入，可以接受多个文件，在更改时（无论使用输入选择了哪个文件），我都想获取图像的url，因此我可以循环浏览每个图像并更新一些<img>标签在页面上的其他位置预览您上传的图像。

我设法用另一个输入来做到这一点，该输入仅是单个文件，对于多个输入还没有那么多。这是我可以使用的单一文件输入方法，然后是到目前为止已启用multiple的输入的方法的详细信息。

这是有效的单个文件输入

// Function to process the image url from the input.
function read_featured_image_URL(input) {
  console.log(input.files);
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    $('#featured-image-preview-thumb-wrap').show();
    reader.onload = function (e) {
      $('.featured-image-preview-thumb').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}

// On change of input (when file selected) run the function to update the <img src="">
$(document).on("change", "#featured-image-input", function(){
  read_featured_image_URL(this);
});

这是console.log（input.files）的控制台日志结果；

FileList {0: File, length: 1}
0: File {name: "single-toilet-roll-holder-2.jpg", lastModified: 1576627618564, lastModifiedDate: Wed Dec 18 2019 00:06:58 GMT+0000 (Greenwich Mean Time), webkitRelativePath: "", size: 91672, …}
length: 1
__proto__: FileList

现在，这是我试图为上传到输入的文件获取相同的input.files数据。

对于初学者来说，我只是在检查输入中是否有任何数据：

$(document).on("change", ".additional-images-input", function(){
  read_multi_file_input(this)
});

function read_multi_file_input(input) {
  console.log(input);
  console.log(input.files);
}

// CONSOLE LOG RESULT:

如您所见，它返回0个结果。在测试中，我通过输入选择了1张图片，没有返回任何结果。

<input id="html5_1dseu9ccnu7a19ag13lc1j7a1nj33" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,image/png,.png" class="additional-images-input">

FileList {length: 0}

这是多文件输入元素：

<input id="html5_1dseu9ccnu7a19ag13lc1j7a1nj33" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="image/jpeg,.jpg,image/png,.png" class="additional-images-input">

Answer 1

在JavaScript中使用for循环：

// Function to process the image url from the input.
function read_featured_image_URL(input) {
  console.log(input.files);
  var max = input.files.length;
  for (i = 0; i < max; i++) {
    if (input.files && input.files[i]) {
      var reader = new FileReader();
      $('#featured-image-preview-thumb-wrap').show();
      reader.onload = function (e) {
        $('.featured-image-preview-thumb').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
}

// On change of input (when file selected) run the function to update the <img src="">
$(document).on("change", "#featured-image-input", function(){
  read_featured_image_URL(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" multiple name="myfiles[]" id="featured-image-input">

Answer 2

我不确定为什么您不会获得任何文件。基本测试表明它有效。下面显示了如何使用forEach来获取每个选定的文件。它还为每个文件生成一个图像。

function read_featured_image_URL(files) {
  // clear out any old images
  var outElem = $("#output").html('') 
  // convert the file list into an array
  Array.from(files)
    // loop over the array of files
    .forEach( function (file) {
      // create a new file reader
      var reader = new FileReader()
      reader.onload = function (e) {
        // create an image element and set the source
        var img = $("<img />", { 'src': e.target.result })
        // add the image to our output element
        outElem.append(img)
      }
      reader.readAsDataURL(file);
    })
}

$(document).on("change", "#featured-image-input", function(){
  read_featured_image_URL(this.files);
});

#output img {
  width: 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" multiple name="myfiles[]" id="featured-image-input">

<div id="output"></dov>

如果要使用for循环。

function read_featured_image_URL(files) {
  // clear out any old images
  var outElem = $("#output").html('') 
  for (var i=0; i<files.length; i++) {
    // reference the file in the current index
    var file = files[i]
    // create a new file reader
    var reader = new FileReader()
    reader.onload = function (e) {
      // create an image element and set the source
      var img = $("<img />", { 'src': e.target.result })
      // add the image to our output element
      outElem.append(img)
    }
    reader.readAsDataURL(file);
  }
}

$(document).on("change", "#featured-image-input", function(){
  read_featured_image_URL(this.files);
});

#output img {
  width: 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" multiple name="myfiles[]" id="featured-image-input">

<div id="output"></dov>

从多文件输入[type =“ file”]中获取文件网址

2 个答案: