使用HTML5文件输入时，在按钮单击时从多个文件上传器中删除文件

如何在这里添加删除按钮就像在这样的文件队列中逐个删除一样

我不使用带有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 = 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  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  oright || 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('' + counter + ' ' + this.files[initial].name + '  
'); } }); }) 

 #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; } } 

   
 
Drop files here...
 
or click here..   
 
  

注意：我没有拥有代码我已经被其他人重新使用它作为我的资源并为我的客户修改它

**更新这里我的小提琴链接

Answer 1

HTML5文件输入的文件列表是只读的，因此当尝试从中删除文件时，您将不被允许。

您需要做的是维护一个单独的数组列表（根据示例的JSON数组）。

我用一个div来包装你的X按钮，该文件索引连接到’file_’字符串，并添加了一个接受该元素作为对象的onclick函数removeLine(obj) 。

我还在全局范围中添加了一个JSON数组finalFiles ，并将inputFile移动到全局范围。

当文件输入改变时，我通过以下方式设置带有所选文件的JSON数组：

 $.each(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); } 

您可以在表单提交时维护您的文件，并使用FormData以类似于本文的方式通过AJAXpost发送它们。

 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('
' + counter + ' ' + this.files[initial].name + '  
'); } }); }) 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; } } 

   
 
Drop files here...
 
or click here..   
 
  

Answer 2

我以前为我的Dropzone做过这个。 随意调整。 这是来自我的Laravel应用程序。 你应该专注于avatar_refresh_upload 。 切断不必要的东西，你就完成了。

 function avatar_refresh_upload() { var input = $('input#avatar[type=file]'); input.replaceWith(input.val('').clone(true)); $('#selected_file').html('{{ Lang::get('app.profile_avatar_select') }}'); $('#avatar_refresh_upload').removeAttr('style'); } $(document).ready(function ($) { $('input:file#avatar').change(function () { var file_name = $(this).val(); if (file_name.length > 10) { file_name = file_name.substring(0, 10) + '...'; } $('#selected_file').html('File "' + file_name + '" chosen'); $('#avatar_refresh_upload').css('display', 'inline-block'); }); $('#avatar_refresh_upload').on('click', function () { avatar_refresh_upload(); }); @if ($user->avatar != '') $('#remove_avatar').change(function () { if ($(this).is(':checked')) { avatar_refresh_upload(); $('#avatar').prop('disabled', true); $('#avatar_preview').css('opacity', '0.5'); $('#avatar_upload_form_area').css('opacity', '0.5'); $('#remove_avatar_info').show(); } else { $('#avatar').prop('disabled', false); $('#avatar_preview').removeAttr('style'); $('#avatar_upload_form_area').removeAttr('style'); $('#remove_avatar_info').removeAttr('style'); } }); @endif }); 

长话短说 – 如果您想在选择要上传的文件之后但在提交之前重置输入文件，则必须运行 ：

 input.replaceWith(input.val('').clone(true)); 

Answer 3

由于我们无法修改标记中的选定文件数组，因此我更新了代码以显示文件数，如果选择了多个文件则删除所有文件。

有一个更新代码的小提琴。

 $(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, fileNames = ""; for (initial; initial < fileNum; initial++) { counter = counter + 1; fileNames += this.files[initial].name + ' '; } if(fileNum > 1) fileNames = 'Files selected...'; else fileNames = this.files[0].name + ' '; $('#filename').append(''+ fileNum + '' + fileNames + ' 
'); // add remove event $('#filename').find('.closeBtn').click(function(){ $('#filename').empty(); inputFile.val(''); }); ///End change }); }) 

Answer 4

 $(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"); var filesArr = []; function showFiles() { $('#filename').html(""); var fileNum = filesArr.length; for (var i = 0; i < fileNum; i++) { $('#filename').append('
'+ i + ' ' + filesArr[i].name + '  
'); } } function addFiles(e) { var tmp; // transfer dropped content to temporary array if (e.dataTransfer) { tmp = e.dataTransfer.files; } else if (e.target) { tmp = e.target.files; } // Copy the file items into the array for(var i = 0; i < tmp.length; i++) { filesArr.push(tmp.item(i)); } // remove all contents from the input elemnent (reset it) inputFile.wrap('
').closest('form').get(0).reset(); inputFile.unwrap(); showFiles(); } 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); addFiles(e); }, true); inputFile.on('change', function(e) { addFiles(e); }); $('#filename').on('click', '.closeBtn', function(e) { e.preventDefault(); e.stopPropagation(); var divElem = $(this).parent(); var index = $('#filename').find('div').index(divElem); if ( index !== -1 ) { $('#filename')[0].removeChild(divElem[0]); filesArr.slice(index,1); } }); }) 

Answer 5

 $(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"); var filesArr = []; function showFiles() { $('#filename').html(""); var fileNum = filesArr.length; for (var i = 0; i < fileNum; i++) { objectURL = URL.createObjectURL(filesArr[i]); $('#filename').append('
'+ i + ' ' + filesArr[i].name + '  X
'); } } function addFiles(e) { var tmp; // transfer dropped content to temporary array if (e.dataTransfer) { tmp = e.dataTransfer.files; } else if (e.target) { tmp = e.target.files; } // Copy the file items into the array for(var i = 0; i < tmp.length; i++) { filesArr.push(tmp.item(i)); //console.log(i); } // remove all contents from the input elemnent (reset it) inputFile.wrap('
').closest('form').get(0).reset(); inputFile.unwrap(); showFiles(); } 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); addFiles(e); }, true); /*inputFile.on('change', function(e) { addFiles(e); });*/ $('#filename').on('click', '.closeBtn', function(e) { e.preventDefault(); e.stopPropagation(); var divElem = $(this).parent(); var index = $('#filename').find('div').index(divElem); if ( index !== -1 ) { $('#filename')[0].removeChild(divElem[0]); filesArr.slice(index,1); } }); inputFile.on('change', function(e) { $('#filename').html(""); var fileNum = this.files.length, initial = 0, counter = 0; for (initial; initial < fileNum; initial++) { counter = counter + 1; objectURL = URL.createObjectURL(this.files[initial]); $('#filename').append('
'+ counter + ' ' + this.files[initial].name + '  X
'); } }); });