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

我不知道你想用这个假冒的道路做什么。成为＆＃34; 假＆＃34;路径，没用。

从历史上看，（在File API之前），它是一种检索所选文件名称的方法，但是现在我们已经获得了File API，这些信息直接在File对象中提供

因此，如果你真的想自己构建它，就像^一样，那么你可以简单地将input[type=file][multiple]添加到文件"C:\fakePath\"。

但是再一次，你无法从这个字符串中做任何事情。

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

因此，对于您展示的部分，它可以只是

＆＃13;

name

＆＃13;

$('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>');
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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");
    });
});

＆＃13;

jQuery获取带有“multiple”属性的文件输入的伪路径来预览图像

1 个答案: