多个拖放文件输入 - 添加下一个文件和最大文件限制

Question

这是我的拖放字段：

<div style="margin-bottom: 1em;">
    <div class="file-well">
        <input type="file" name="file" id="file" multiple/>
        <span id="filewelllabel">click here or drag and drop to add<br/></span>
        <span id="filewelllabel">you can add up to 5 files (.pdf, .doc, .docx, .docm)</span>
    </div>
</div>
<p0></p0>
<%-- file names --%>
    <p1></p1>
    <p2></p2>
    <p3></p3>
    <p4></p4>

我目前的局限是：

$('#file').change(function() {
    var $fileUpload = $("input[type='file']");
    if (parseInt($fileUpload.get(0).files.length) > 5) {
        alert("max 5 files!");
        // this.files.length = 0;
        return false;
    }
    for (var i = 0; i < this.files.length; i++) {
        var filename = this.files[i].name.split('\\').pop();
        $("p" + i).html("choosen file: " + filename);

    }
});

但此时如果我想要多个文件，我可以一次拖放所有文件。否则它们将被我选择的新文件替换。

我希望能够一一选择它们并在添加后显示一个，然后如果有人决定添加下一个我希望将其添加为另一个文件，而不是覆盖现有文件。

如何做到这一点？

另外我该如何实现删除文件选项？

Answer 1

请进行以下更改-

var $fileUpload = $("input[type='file']");

到-

var $fileUpload = $(this);