HTML5 FileReader API - 如何删除文件答案

【问题标题】：HTML5 FileReader API - how to remove a fileHTML5 FileReader API - 如何删除文件
【发布时间】：2016-01-08 14:23:49
【问题描述】：

我正在使用 HTML 5 FileReader API 在上传到服务器之前预览图像。

由于FileReader 没有remove() 方法，我如何从列表中删除项目？

这是我的代码

        $("body").on('change', '.files', function() {

          //Get count of selected files
          var countFiles = $(this)[0].files.length;

          var imgPath = $(this)[0].value;
          var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
          var image_holder = $("#image-holder");
          image_holder.empty();

          if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
            if (typeof(FileReader) != "undefined") {

              //loop for each file selected for uploaded.
              for (var i = 0; i < countFiles; i++) {

                var reader = new FileReader();
                reader.onload = function(e) {
                  $("<img />", {
                    "src": e.target.result,
                    "class": "img-thumbnail img-responsive",
                    "width": "100",
                  }).appendTo(image_holder);
                }

                image_holder.show();
                reader.readAsDataURL($(this)[0].files[i]);
              }

            } else {
              alert("This browser does not support FileReader.");
            }
          } else {
            alert("Pls select only images");
          }
        });

<div id="wrapper">
  <div id="image-holder"></div>
</div>

【问题讨论】：

标签： javascript jquery html filereader

【解决方案1】：

Files 对象是一个 readonly 类数组对象，所以修改它是不行的。一种技术似乎是立即将其元素复制到实际的数组中然后根据需要操作数组。

【讨论】：

【解决方案2】：

这是使用 FileReader 的替代方法：

// var placed here so that other functions can manipulate
var filesChangeable = []; 
function fileInfo(event){
                       event.preventDefault();

                   // files contains the array of dropped images
                       var files = event.dataTransfer.files;
                       previewFiles(files);

                       function previewFiles(files) {

                       for (var k=0; k<files.length; k++) {

                       var file = files[k];
                       filesChangeable.push(files[k]);    

                       $("#demo").append("<img src='"+URL.createObjectURL(filesChangeable[k])+"' />");

                   }

【讨论】：