jquery - Eliminar el archivo del cargador de múltiples archivos al hacer clic en el botón cuando se usa la entrada de archivos HTML5
multifile-uploader (5)
Como no podemos modificar la matriz de archivos seleccionados en la etiqueta
<input type''file'' multiple>
, he actualizado su código para mostrar el recuento de archivos y eliminar todos los archivos si se seleccionan varios archivos.
Hay un violín del código actualizado .
$(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(''<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;">''+ fileNum + ''</strong></span><span">'' + fileNames + ''</span> <span class="fa fa-times-circle fa-lg closeBtn" title="remove"></span><br>'');
// add remove event
$(''#filename'').find(''.closeBtn'').click(function(){
$(''#filename'').empty();
inputFile.val('''');
});
///End change
});
})
Cómo agregar el botón Eliminar aquí como simple eliminar uno por uno en la cola de archivos como este
La razón por la que no uso complementos de carga de archivos gratuitos con complementos OOB porque los requisitos de mi cliente es por motivos de seguridad y necesitan una interfaz de usuario de carga simple sin complementos complicados.
$(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>
Nota: no era dueño del código, lo he reutilizado como recursos de otras personas y lo modifiqué para mi cliente
** ACTUALIZACIÓN Aquí mi enlace de fiddle
He hecho esto antes para mi Dropzone.
Siéntase libre de ajustar.
Esto es de mi aplicación Laravel.
Debes centrarte en
avatar_refresh_upload
.
Corta cosas innecesarias y listo.
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
});
En pocas palabras: si desea restablecer el archivo de entrada después de elegir un archivo para cargar pero antes de enviarlo, debe ejecutar :
input.replaceWith(input.val('''').clone(true));
La lista de archivos de entrada de archivos HTML5 es de solo lectura, por lo que al intentar eliminar un archivo no se le permitirá.
Lo que debe hacer es mantener una lista de matriz separada (matriz JSON según el ejemplo).
He envuelto su botón X con un div que contiene el índice del archivo concatenado a una cadena ''file_'', y agregué una función
onclick
removeLine(obj)
que acepta el elemento como un objeto.
También agregué una matriz JSON
finalFiles
en el alcance global, así como moví el
inputFile
al alcance global.
Cuando la entrada del archivo cambia, estoy configurando la matriz JSON con los archivos seleccionados a través de:
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
La función
removeLine
la lista de archivos de entrada para permitir la misma selección de archivos nuevamente si el usuario eliminó el archivo por error, la función obtiene el índice del archivo de la identificación de la división del contenedor, elimina el contenedor y luego elimina el archivo de la matriz 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);
}
Puede mantener sus archivos cuando se envía el formulario y enviarlos a través de la publicación AJAX utilizando FormData de manera similar a este artículo .
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>
$(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(''<div><img title="''+filesArr[i].name+''" id="''+objectURL+''" src="''+objectURL+''" class="pre-visualizacao"><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;">''+ i + ''</strong></span> '' + filesArr[i].name + '' <span class="closeBtn" title="Remover">X</span></div>'');
}
}
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(''<form>'').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(''<div><img title="''+this.files[initial].name+''" id="''+objectURL+''" src="''+objectURL+''" class="pre-visualizacao"><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="closeBtn" title="Remover">X</span></div>'');
}
});
});
$(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(''<div><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;">''+ i + ''</strong></span> '' + filesArr[i].name + '' <span class="fa fa-times-circle fa-lg closeBtn" title="remove"></span></div>'');
}
}
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(''<form>'').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);
}
});
})