如何为多个上传文件设置add/remove按钮？

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

以及如何修复此错误：

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type '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

如何为多个上传文件设置add/remove按钮？

How to add/remove button for multiple uploaded files?

html

javascript

jquery

file-upload

multiple-file-upload