如何为多个上传的文件添加/删除按钮？

Question

我想为删除图像缩略图和选定文件添加删除按钮。我该怎么做？这是我的代码

Js：

window.imagePreview = function (t) {
    if (t.files && t.files[0]) {
        for (var i = 0; t.files.length >= i; i++) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#image-preview').append('<img src="' + this.result + '"/>');
            };

            reader.readAsDataURL(t.files[i]);
        }
    }
}

CSS：

.btn-file{
    position: relative;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
}

#image-preview {
    width: 100%;
    max-height: 260px;
    height: 260px;
    overflow-y: auto;
    background-color: #F0F0F0;
    border: 1px dashed #928f8f;
    border-radius: 4px;
    margin-bottom: 10px;
}


#image-preview img {
    max-width: 120px;
    max-height: 120px;
    display: inline-block;
    margin: 5px;
}

HTML：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="image-preview"></div>
  <span class="btn btn-primary btn-file">
    <input type="file" name="file[]" id="file" class="" multiple onchange="imagePreview(this)" style="width: 0;height: 0;">
      Select Files
  </span>

JSfiddle

以及如何解决这个错误：

未捕获的 TypeError：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型

Answer 1

看看这段代码是不是你想要的。

window.imagePreview = function (t) {
    if (t.files && t.files[0]) {
        for (var i = 0; t.files.length > i; i++) {
            var reader = new FileReader();
            reader.onload = function (e) { 
                var thumbnail = '<div>';
                    thumbnail += '<img class="image" src="' + e.target.result + '"/>';
                    thumbnail += '<button class="removeButton">Remove File</button>';
                    thumbnail += '</div>';
                $('#image-preview').append(thumbnail); 

                $(".removeButton").on("click", function(){
                   $(this).closest('div').remove();
                   document.getElementById("file").value = "";
                });

            };
            reader.readAsDataURL(t.files[i]);
        }
    }
}

顺便说一下，你得到的错误是因为你设置了t.files.length >= i，这导致循环再运行一次，最后一次运行时没有可用的文件数据。

JSfiddle