jQuery获取具有“多个”属性的文件输入的假路径以预览图像

Question

我有输入文件（多个）用于上传图像。上传图像后，它将显示为缩略图和完整视图。我已经有URL.createObjectURL() 将图像渲染为blob，但是当图像数量更多时，它会稍微影响页面，因为每个图像都有 2 个用于缩略图和完整视图的 blob 数据。

对于单个文件上传，很容易让URL.createObjectURL() 用于缩略图和$(this).val() 为完整视图生成假路径。但我不知道如何通过多文件上传来做到这一点。

示例代码：

$('#imageBtn').on('change', function(){
    var inputFiles = this.files;
    $(inputFiles).each(function(index) {
       var reader = new FileReader();
       reader.readAsDataURL(inputFile);
       reader.onloadend = function(){
           RenderedPath = URL.createObjectURL(inputFile);
           FakePath = inputFile.val();
           // Some codes to populate the thumbnail and fullview
       }
    });
});

那么，如何获取每张上传图片的虚假路径？

Answer 1

我看不出你想用这个 fakePath 做什么。作为一个“fake”路径，它是没有用的。

从历史上看，（在 File API 之前），它是一种检索选定文件名称的方法，但现在我们有了 File API，此信息直接在 File 对象中提供。

所以如果你真的想自己构建它，比如input[type=file][multiple]，那么你可以简单地将"C:\fakePath\"添加到文件的name。

但再一次，您将无法通过此字符串执行任何操作。

还请注意，在您的代码中，您不会对 FileReader 的结果做任何事情，而且无论如何，此时您不需要它，因此请在此处删除它，因为它可能是您的内存问题的原因之一.
实际上，对于用户提供的文件，BlobURI 不会使用任何内存，它是指向存储在用户磁盘上的文件的简单指针，而将其作为 dataURI 读取实际上会将整个数据加载到内存中三倍。

所以对于你展示的部分，它可以简单地是

$('input[type="file"]').on('change', function() {
  var files = this.files;
  $(files).each(function(index, file) {
    // Still don't know why you want this...
    var fakepath = 'C:\\fakepath\\';
    $('body').append('<div>' +
      // build  a fake path string for each File
      '<p class="path">'+ fakepath + file.name + '</p>' +
      // all that is really needed to display the image
      '<img src="'+URL.createObjectURL(file)+'">' +
     '</div>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" multiple>

现在，您在评论中声明您需要 FileReader 将其传递给 jsZip 库，如果您在谈论 this one，那么您必须知道 it accepts Blobs。所以你仍然不需要 FileReader。

var fileList = [];
$('input[type="file"]').on('change', function() {
  var files = this.files;
  $(files).each(function(index, file) {
    $('body').append($('<img>', {
      src: URL.createObjectURL(file),
      onload: function() { fileList.push(file); $('button').attr('disabled', false);},
      onerror: function() { $(this).remove(); }
    }));
  });
});

$('button').on('click', function() {
  var zip = new JSZip();
  fileList.forEach(function(file) {
    zip.file(file.name, file);
  });
  zip.generateAsync({
      type: "blob"
    })
    .then(function(blob) {
      saveAs(blob, "myfiles.zip");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.5/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>

<input type="file" multiple accept="image/*">
<button disabled>save as zip</button>