多文件上传 - 带有“删除文件"链接 [英] Multiple file upload - with 'remove file' link
问题描述
我正在尝试创建一个表单,其中可以有多个文件上传部分,用户可以在其中上传多个文件.
那部分相当简单.我的问题来自于允许用户在上传之前从上传列表中删除"文件.
我创建了一个小提琴来说明
http://jsfiddle.net/alexjamesbrown/o62srbew/
我有一个简单的行,其中包含 <input type="file"
<h2>文件 1</h2><span class="btn btn-default btn-file">浏览<input type="file" name="files1" multiple/></span><br/><ul class="fileList"></ul>
那么,到目前为止,我已经创建了一个 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 输出 = [];for (var i = 0, f; f = evt.target.files[i]; i++) {var removeLink = "<a href=\"#\" data-fileid=\"" + i + "\">Remove</a>";output.push("", escape(f.name), " - ",f.size, " bytes. ", removeLink, "</li> ");}$(this).children(".fileList").append(output.join(""));});};
然后我像这样初始化我的非常基本的插件:
var filesToUpload = [];$("#files1").fileUploader(filesToUpload);$("#files2").fileUploader(filesToUpload);$("#uploadBtn").click(function (e) {e.preventDefault();});
在这个 JSFiddle,我在动态生成的remove
链接中添加了一个类名.removeFile
;然后使用这个类作为选择器来选择被点击的那个并删除父 li
.
更新:
JS:
//将 .removeFile 类添加到 li 的元素中以通过此选择器选择它们var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";output.push("", escape(f.name), " - ",f.size, " bytes. ", 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();//遍历 files 数组并检查该文件的名称是否与 FileName 匹配//并获取匹配的索引for(i = 0; i < filesToUpload.length; ++ i){if(filesToUpload[i].name == fileName){//console.log("匹配于:" + i);//删除我们得到匹配的索引处的一个元素filesToUpload.splice(i, 1);}}//console.log(filesToUpload);//删除 <li>从页面 DOM 中删除的文件的元素$(this).parent().remove();});
您可以取消对 console.log() 语句的注释以查看结果
I'm trying to create a form where I can have multiple file upload sections, where the user can upload multiple files.
That part, is reasonably straight forward. My problem comes from allowing the user to 'remove' a file from the upload list, before it's uploaded.
I've created a fiddle to illustrate
http://jsfiddle.net/alexjamesbrown/o62srbew/
I've got a simple row, that holds the <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>
then, so far, I've created a jquery plugin so it's re-usable:
$.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. ", removeLink, "</li> ");
}
$(this).children(".fileList")
.append(output.join(""));
});
};
I'm then initialising my very basic plugin like this:
var filesToUpload = [];
$("#files1").fileUploader(filesToUpload);
$("#files2").fileUploader(filesToUpload);
$("#uploadBtn").click(function (e) {
e.preventDefault();
});
As in this JSFiddle, I've added a class name .removeFile
to the dynamically generated remove
link; then use this class as a selector to pick up the one which is clicked and remove the parent li
.
Updated:
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. ", 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();
});
You can un-comment the console.log() statements to see the result
这篇关于多文件上传 - 带有“删除文件"链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!