Question

我需要你的帮助以解决以下问题：

我有HTML输入，支持多个文件;
我上传让我们说5个文件;
处理每个文件：FileReader为readAsDataURL，文件数据保存到对象（也会保存其他参数，这就是对象），这是推送到数组的。
运行我描述的流程后，最终数组的长度不会改变。

我认为问题出现在异步行为中，但我无法理解如何更改代码以使其正常工作，这就是我向您寻求帮助的原因。请在下面找到代码：

    var controls = document.getElementById('controls');

    function processUploadedFilesData(files) {
      if (!files[0]) {
        return;
      };

      var uploads = [];

      for (var i = 0, length = files.length; i < length; i++) {
        (function(file) {
          var reader = new FileReader();
          //I need object, as other params will be saved too in future; 
          var newFile = {};
          reader.readAsDataURL(file);
          reader.onloadend = function(e) {
            newFile.data = e.target.result;
            uploads.push(newFile);
          }
        })(files[i]);
      }
      return uploads;
    }

    controls.addEventListener('change', function(e) {
      var uploadedFilesOfUser = processUploadedFilesData(e.target.files);
      alert(uploadedFilesOfUser.length);
    });

Codepen示例 - https://codepen.io/yodeco/pen/xWevRy

从输入循环多个文件，将每个文件readAsDataURL数据保存到数组

0 个答案: