Creé una función para clonar archivos de entrada si el usuario hacía clic dos veces en el botón de elegir archivo para evitar que el campo borrara las imágenes cargadas anteriormente.
$(function() { // Multiple images preview with JavaScript var multiImgPreview = function(input, imgPreviewPlaceholder) { if (input.files) { $("#multipleImageUpload").on("change", function(e) { var filesAmount = input.files.length; for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function(event) { $($.parseHTML("<span class=\"pip\">" + "<br/><span id=\"remove_icon\">Remove</span>" + "<img src=\"" + event.target.result + "\" title=\"" + "\"/>" + "</span>")).appendTo(imgPreviewPlaceholder); $("#remove_icon").click(function(){ $(this).parent(".pip").remove(); }); } reader.readAsDataURL(input.files[i]); } }); } }; $(document).on('click', '#multipleImageUpload', function() { // add to preview multiImgPreview(this, 'div.imgPreview'); //clone var originalInput = $(this), cloned = originalInput.clone(); // move originalInput.attr("id", Date.now()); originalInput.removeClass('multipleImageUpload'); originalInput.appendTo($('#multipleFilesPH')); cloned.attr("id", "multipleImageUpload"); cloned.insertAfter($('#multipleFilesPH')); originalInput = null; cloned = null; }); });el problema aquí es que cuando el usuario hace clic en el botón Eliminar, solo elimina la imagen de la vista y el archivo cargado no se elimina y se envía al servidor. ¿Alguna idea de lo que estoy haciendo mal aquí?
Hay dos formas básicas de hacer esto.
.on() para enlazar con el elemento dinámicoclick() al objetoAquí hay un ejemplo de esto último.
$(function() { // Multiple images preview with JavaScript var multiImgPreview = function(input, imgPreviewPlaceholder) { if (input.files) { $("#multipleImageUpload").on("change", function(e) { var filesAmount = input.files.length; $.each(input.files, function(i, file){ var reader = new FileReader(); reader.onload = function(event) { var pip = $("<span>", { class: "pip" }).appendTo(imgPreviewPlaceholder); var icon = $("<span>", { class: "remove_icon" }).html("Remove").insertAfter(pip); var img = $("<img>", { src: event.target.result, title: "" }).insertAfter(icon); icon.click(function() { $(this).parent(".pip").remove(); }); } reader.readAsDataURL(file); } }); } }; $(document).on('click', '#multipleImageUpload', function() { // add to preview multiImgPreview(this, 'div.imgPreview'); //clone var originalInput = $(this), cloned = originalInput.clone(); // move originalInput.attr("id", Date.now()); originalInput.removeClass('multipleImageUpload'); originalInput.appendTo($('#multipleFilesPH')); cloned.attr("id", "multipleImageUpload"); cloned.insertAfter($('#multipleFilesPH')); originalInput = null; cloned = null; }); });Esto utiliza la capacidad de jQuery para crear elementos DOM sobre la marcha a partir de la cadena proporcionada de HTML sin procesar . Ver más .
Si desea vincular una devolución de llamada de clic a ese elemento específico, puede almacenar el Objeto resultante en una variable y usar eso para vincular el evento a ese objeto solo.
Cambié el atributo a Clase, ya que es probable que tenga más de 1 elemento con esta ID, por lo que no sería Único de otros elementos. Puede terminar con 3 o 4 elementos con la misma ID.