Question

我正在尝试创建一个表单，我可以在其中设置多个文件上传部分，用户可以上传多个文件。

那部分是相当直接的。我的问题来自于允许用户删除＆＃39;上传列表中的文件，然后上传。

我创造了一个小提琴来说明 http://jsfiddle.net/alexjamesbrown/o62srbew/

我有一个简单的行，其中包含<input type="file"

<div class="row files" id="files1">
    <h2>Files 1</h2>
    <span class="btn btn-default btn-file">
        Browse  <input type="file" name="files1" multiple />
    </span>
    <br />
    <ul class="fileList"></ul>
</div>

然后，到目前为止，我已经创建了一个jquery插件，因此它可以重复使用：

$.fn.fileUploader = function (filesToUpload) {
    this.closest(".files").change(function (evt) {

        for (var i = 0; i < evt.target.files.length; i++) {
            filesToUpload.push(evt.target.files[i]);
        };
        var output = [];

        for (var i = 0, f; f = evt.target.files[i]; i++) {
            var removeLink = "<a href=\"#\" data-fileid=\"" + i + "\">Remove</a>";

            output.push("<li><strong>", escape(f.name), "</strong> - ",
                f.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
        }

        $(this).children(".fileList")
            .append(output.join(""));
    });
};

然后我就像这样初始化我的基本插件：

var filesToUpload = [];

$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);

$("#uploadBtn").click(function (e) {
    e.preventDefault();
});

Answer 1

与此JSFiddle一样，我已在动态生成的.removeFile链接中添加了一个类名remove;然后使用此类作为选择器来拾取单击的那个并删除父li。

<强> 更新

<强> JS：

// add .removeFile class to the li's element to pick them by this selector
var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";

        output.push("<li><strong>", escape(f.name), "</strong> - ",
            f.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
    }

    $(this).children(".fileList")
        .append(output.join(""));
    });
};

var filesToUpload = [];

$(document).on("click",".removeFile", function(e){
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();

     // loop through the files array and check if the name of that file matches FileName
    // and get the index of the match
    for(i = 0; i < filesToUpload.length; ++ i){
        if(filesToUpload[i].name == fileName){
            //console.log("match at: " + i);
            // remove the one element at the index where we get a match
            filesToUpload.splice(i, 1);
        }   
    }

    //console.log(filesToUpload);
    // remove the <li> element of the removed file from the page DOM
    $(this).parent().remove();
});

您可以取消注释console.log（）语句以查看结果

多个文件上传 - 使用＆＃39;删除文件＆＃39;链接

1 个答案: