从多文件输入中获取文件 url[type="file"] [重复]答案

【问题标题】：Grab file urls from multi file input[type="file"] [duplicate]从多文件输入中获取文件 url[type="file"] [重复]
【发布时间】：2019-12-19 11:38:24
【问题描述】：

我有一个接受多个文件的输入，在更改时（每当使用输入选择一个文件时），我想获取图像的 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">

【问题讨论】：

所以创建一个循环。
如前所述，我得到的回报是 0，所以目前没有什么可循环的。
你想要什么输出？
注意：您不需要此文件的内容，因此您不想“阅读”它，也不需要 FileReader。由于您想要链接到它以便（而不是您的脚本）可以显示它，因此创建一个指向它的链接。为此，请使用同步 URL.createObjectURL() 方法，这样您就可以避免无用的回调噩梦，同时节省大量用户设备的内存。
Ps：我确实投票关闭，因为缺少minimal reproducible example，而不是重复。请尝试制作一个我们也可以遇到相同问题的地方，您可以使用StackSnippets 在您的问题本身中创建可运行的sn-ps。

标签： javascript html

【解决方案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">

【讨论】：

答案似乎有很大缺陷。首先它只有一个图像，其次你只加载第一个图像。

【解决方案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>

【讨论】：