使用HTML5文件输入时，在按钮上单击从多个文件上传器中删除文件 [英] Removing file from multiple files uploader on button click when using HTML5 file input
本文介绍了使用HTML5文件输入时，在按钮上单击从多个文件上传器中删除文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何在此添加删除按钮，就像在这样的文件队列中逐个删除一样
p>
为什么我没有使用带有OOB插件的免费文件上传插件，因为我的客户端要求是出于安全目的，他们需要简单的上传ui而没有任何复杂的插件。
$（function（）{var dropZoneId =drop-zone; var buttonId =clickHere ; var mouseOverClass =mouse-over; var dropZone = $（＃+ dropZoneId）; var ooleft = dropZone.offset（）。left; var ooright = dropZone.outerWidth（）+ ooleft; var ootop = dropZone。 offset（）。top; var oobottom = dropZone.outerHeight（）+ ootop; var inputFile = dr opZone.find（ 输入）; document.getElementById（dropZoneId）.addEventListener（dragover，function（e）{e.preventDefault（）; e.stopPropagation（）; dropZone.addClass（mouseOverClass）; var x = e.pageX; var y = e.pageY ; if（！（x ooright || y oobottom））{inputFile.offset（{top：y - 15，left：x - 100}）;} else {inputFile.offset（{top：-400，left：-400}）;}}，true）; if（buttonId！=）{var clickZone = $（＃+ buttonId）; var oleft = clickZone.offset（）。left; var oright = clickZone.outerWidth（）+ oleft; var otop = clickZone.offset（）。top; var obottom = clickZone.outerHeight（）+ otop; $（＃+ buttonId）.mousemove（function（e）{var x = e.pageX; var y = e.pageY; if（！（x< oleft || x> oright || y< otop || y> obottom））{inputFile.offset（{top：y - 15，left：x - 160}）;} else {inputFile.offset（{top：-400，left：-400}）;}} ）; } document.getElementById（dropZoneId）.addEventListener（drop，function（e）{$（＃+ dropZoneId）.removeClass（mouseOverClass）;}，true）; inputFile.on（'change'，function（e）{$（'＃filename'）。html（）; var fileNum = this.files.length，initial = 0，counter = 0; for（initial; initial< ; fileNum; initial ++）{counter = counter + 1; $（'＃filename'）。append（'< span class =fa-stack fa-lg>< i class =fa fa-file fa- stack-1x>< / i>< strong class =fa-stack-1xstyle =color：#FFF; font-size：12px; margin-top：2px;>'+ counter + '< / strong>< / span>'+ this.files [initial] .name +'& nbsp;& nbsp;< span class =fa fa-times-circle fa-lg closeBtntitle = 删除>< / span>< br>'）;}}）;}）
＃drop-zone {width：100％; min-height：150px; border：3px dashed rgba（0,0,0，.3）; border-radius：5px; font-family：Arial; text-align：center;位置：相对; font-size：20px;颜色：＃7E7E7E;}＃drop-zone input {position：absolute;光标：指针;左：0px; top：0px; opacity：0;} / *重要* /＃drop-zone.mouse-over {border：3px dashed rgba（0，0，0，.3）;颜色：＃7E7E7E;} / *如果你不想要按钮* /＃clickHere {display：inline-block;光标：指针;白颜色; font-size：17px;宽度：150px; border-radius：4px;背景颜色：＃4679BD; padding：10px;}＃clickHere：hover {background-color：＃376199;}＃filename {margin-top：10px; margin-bottom：10px; font-size：14px; line-height：1.5em;}。file-preview {background：#ccc; border：5px solid #fff; box-shadow：0 0 4px rgba（0，0，0，0.5）;显示：inline-block;宽度：60px;身高：60px; text-align：center; font-size：14px; margin-top：5px;}。closeBtn：hover {color：red;}}
< link href =https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css =stylesheet/>< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script>< div id =drop-zone> < p>在此处放置文件...< / p> < div id =clickHere>或点击此处。< i class =fa fa-upload>< / i> < input type =filename =fileid =filemultiple /> < / DIV> < div id ='filename'>< / div>< / div>
注意：我没有拥有代码我已经被其他人重新用作我的资源并为我的客户修改了它
** UPDATE
在这里，我的小提琴链接
解决方案
HTML5文件输入的文件列表是只读的，所以当试图从文件中删除文件时，您将不被允许。
你需要做的是维护一个单独的数组列表（按照例子的JSON数组）。
我已经包裹了带有div的X按钮，该文件索引连接到'file_'字符串，并添加 onclick 函数 removeLine（obj）接受元素作为对象。
我还添加了一个JSON数组 finalFiles 全局范围以及将 inputFile 移至g小文范围。
当文件输入发生变化时，我通过以下方式设置带有所选文件的JSON数组：
<$ （$ this.files，function（idx，elm）{
finalFiles [idx] = elm;
}）;
函数 removeLine 将刷新输入文件如果用户错误地删除了文件，则该列表允许再次允许相同的文件选择，该函数从包装器分区ID获取文件索引，删除包装器div然后从JSON数组中删除该文件。
function removeLine（obj）
{
inputFile.val（''）;
var jqObj = $（obj）;
var container = jqObj.closest（'div'）;
var index = container.attr（id）。split（'_'）[1];
container.remove（）;
delete finalFiles [index];
//console.log(finalFiles）;
}
您可以在表单提交时维护您的文件并通过AJAX发送它们使用FormData的方式与本文类似。
var dropZoneId =drop-zone; var buttonId =clickHere; var mouseOverClass =mouse-over; var dropZone = $（＃+ dropZoneId）; var inputFile = dropZone.find（input）; var finalFiles = {}; $（function（）{var ooleft = dropZone.offset（）。left; var ooright = dropZone.outerWidth（）+ ooleft; var ootop = dropZone.offset（）。top; var oobottom = dropZone。 （）; e.stopPropagation（）; dropZone.addClass（mouseOverClass）; var x = e.pageX; var y = e.pageY; if（！（x ooright || y< ootop || y> oobottom））{inputFile.offset（{top：y - 15，left：x - 100}）;} else {inputFile.offset（{top：-400，left：-400}）;}}，true）; if（buttonId！=）{var clickZone = $（＃+ buttonId ）; var oleft = clickZone.offset（）。left; var oright = clickZone.outerWidth（）+ oleft; var otop = clickZone.offset（）。top; var obottom = clickZone.outerHeight（）+ otop; $（＃ + buttonId）.mousemove（function（e）{var x = e.pageX; var y = e.pageY; if（！ （x < oleft || x> oright || y< otop || y> obottom））{inputFile.offset（{top：y - 15，left：x - 160}）; } else {inputFile.offset（{top：-400，left：-400}）; }}）; } document.getElementById（dropZoneId）.addEventListener（drop，function（e）{$（＃+ dropZoneId）.removeClass（mouseOverClass）;}，true）; inputFile.on（'change'，function（e）{finalFiles = {}; $（'＃filename'）。html（）; var fileNum = this.files.length，initial = 0，counter = 0; $ .each（this.files，function（idx，elm）{finalFiles [idx] = elm;}）; for（initial; initial< fileNum; initial ++）{counter = counter + 1; $（'＃filename'）。 append（'< div id =file _'+ initial +'>< span class =fa-stack fa-lg>< i class =fa fa-file fa-stack-1x> ;< / i>< strong class =fa-stack-1xstyle =color：#FFF; font-size：12px; margin-top：2px;>'+ counter +'< / strong> ;< / span>'+ this.files [initial] .name +'& nbsp;& nbsp;< span class =fa fa-times-circle fa-lg closeBtnonclick =removeLine（this） title =remove>< / span>< / div>'）;}}};}）function removeLine（obj）{inputFile.val（''）; var jqObj = $（obj）; var container = jqObj.closest（'div'）; var index = container.attr（id）。split（'_'）[1]; container.remove（）;删除finalFiles [index]; //console.log(finalFiles);} #drop -zone {width：100％; min-height：150px; border：3px dashed rgba（0,0,0，.3）; border-radius：5px; font-family：Arial; text-align：center;位置：相对; font-size：20px;颜色：＃7E7E7E;}＃drop-zone input {position：absolute;光标：指针;左：0px; top：0px; opacity：0;} / *重要* /＃drop-zone.mouse-over {border：3px dashed rgba（0，0，0，.3）;颜色：＃7E7E7E;} / *如果你不想要按钮* /＃clickHere {display：inline-block;光标：指针;白颜色; font-size：17px;宽度：150px; border-radius：4px;背景颜色：＃4679BD; padding：10px;}＃clickHere：hover {background-color：＃376199;}＃filename {margin-top：10px; margin-bottom：10px; font-size：14px; line-height：1.5em;}。file-preview {background：#ccc; border：5px solid #fff; box-shadow：0 0 4px rgba（0，0，0，0.5）;显示：inline-block;宽度：60px;身高：60px; text-align：center; font-size：14px; margin-top：5px;}。closeBtn：hover {color：red; display：inline-block;}}
< link href =https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css =stylesheet/>< script src =https：// ajax。 googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></script><div id =drop-zone> < p>在此处放置文件...< / p> < div id =clickHere>或点击此处。< i class =fa fa-upload>< / i> < input type =filename =fileid =filemultiple /> < / DIV> < div id ='filename'>< / div>< / div>
How to add remove button here like simple remove one by one in files queue like this
The reason why im not using free file upload plugins with OOB plugs because my client requirements is for security purposes and they need simple upload ui without any complicated plugins.
$(function() {
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
var inputFile = dropZone.find("input");
document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function(e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
inputFile.on('change', function(e) {
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0;
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
$('#filename').append('<span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + ' <span class="fa fa-times-circle fa-lg closeBtn" title="remove"></span><br>');
}
});
})
#drop-zone {
width: 100%;
min-height: 150px;
border: 3px dashed rgba(0, 0, 0, .3);
border-radius: 5px;
font-family: Arial;
text-align: center;
position: relative;
font-size: 20px;
color: #7E7E7E;
}
#drop-zone input {
position: absolute;
cursor: pointer;
left: 0px;
top: 0px;
opacity: 0;
}
/*Important*/
#drop-zone.mouse-over {
border: 3px dashed rgba(0, 0, 0, .3);
color: #7E7E7E;
}
/*If you dont want the button*/
#clickHere {
display: inline-block;
cursor: pointer;
color: white;
font-size: 17px;
width: 150px;
border-radius: 4px;
background-color: #4679BD;
padding: 10px;
}
#clickHere:hover {
background-color: #376199;
}
#filename {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.5em;
}
.file-preview {
background: #ccc;
border: 5px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.closeBtn:hover {
color: red;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
<p>Drop files here...</p>
<div id="clickHere">or click here.. <i class="fa fa-upload"></i>
<input type="file" name="file" id="file" multiple />
</div>
<div id='filename'></div>
</div>
Note: I didnt own the code i've been reused it as my resources from other people and modified it for my client
**UPDATE Here my fiddle link
解决方案
The file list of HTML5 file input is readonly, so when trying to remove a file from it you won't be allowed.
What you need to do is maintain a separate array list (JSON array as per the example).
I have wrapped your X button with a div that hold the file index concatenated to a 'file_' string, and added an onclick function removeLine(obj) that accepts the element as an object.
I have also added a JSON array finalFiles in the global scope as well as moved the inputFile to the global scope.
When the file input changes, I am setting the JSON array with the selected files through :
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
The function removeLine will flush the input file list to allow the same file selection again if the user removed the file by mistake, the function obtains the file index from the wrapper division id, removes the wrapper div then deletes the file from the JSON array.
function removeLine(obj)
{
inputFile.val('');
var jqObj = $(obj);
var container = jqObj.closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete finalFiles[index];
//console.log(finalFiles);
}
You can the maintain your files when the form submits and send them through AJAX post using FormData in a similar manner to This Article.
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var inputFile = dropZone.find("input");
var finalFiles = {};
$(function() {
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function(e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
inputFile.on('change', function(e) {
finalFiles = {};
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0;
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
$('#filename').append('<div id="file_'+ initial +'"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + ' <span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
}
});
})
function removeLine(obj)
{
inputFile.val('');
var jqObj = $(obj);
var container = jqObj.closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete finalFiles[index];
//console.log(finalFiles);
}
#drop-zone {
width: 100%;
min-height: 150px;
border: 3px dashed rgba(0, 0, 0, .3);
border-radius: 5px;
font-family: Arial;
text-align: center;
position: relative;
font-size: 20px;
color: #7E7E7E;
}
#drop-zone input {
position: absolute;
cursor: pointer;
left: 0px;
top: 0px;
opacity: 0;
}
/*Important*/
#drop-zone.mouse-over {
border: 3px dashed rgba(0, 0, 0, .3);
color: #7E7E7E;
}
/*If you dont want the button*/
#clickHere {
display: inline-block;
cursor: pointer;
color: white;
font-size: 17px;
width: 150px;
border-radius: 4px;
background-color: #4679BD;
padding: 10px;
}
#clickHere:hover {
background-color: #376199;
}
#filename {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.5em;
}
.file-preview {
background: #ccc;
border: 5px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.closeBtn:hover {
color: red;
display:inline-block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
<p>Drop files here...</p>
<div id="clickHere">or click here.. <i class="fa fa-upload"></i>
<input type="file" name="file" id="file" multiple />
</div>
<div id='filename'></div>
</div>
这篇关于使用HTML5文件输入时，在按钮上单击从多个文件上传器中删除文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
