Tengo dos funciones, una que crea una vista previa de imagen para cada imagen cargada y otra que clona el archivo de entrada si el usuario hace clic en el botón Elegir archivo para evitar que se elimine el archivo anterior.

jsviolín

esta es la función de vista previa de la imagen

 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) { $("<span class=\"pip\">" + "<span class=\"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]); } }); } };

y esta es la funcion de clonar

 $(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 cuando hago clic en eliminar, solo elimina la vista previa de la imagen y no la entrada clonada, ¿cómo vincular dinámicamente la entrada clonada a la vista previa de la imagen para eliminar la imagen y nunca enviarla al servidor?