HTML5 FileReader API - 如何删除文件

Question

我正在使用 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>

Answer 1

Files对象是一个只读array-like对象，所以修改它是no-go。一种技术似乎是立即将其元素复制到实际数组中然后根据需要操作数组。

Answer 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])+"' />");

                   }

HTML5 FileReader API - 如何删除文件

HTML5 FileReader API - how to remove a file

html

javascript

jquery

filereader