Solución:
Intente agregar esto: .click(function(){$(this).remove();});. Eliminará la imagen haciendo clic en ella.
EDITAR Incluye versión mejorada.
EDITAR 2 Dado que la gente sigue preguntando, consulte esta respuesta sobre cómo eliminar manualmente un archivo de una lista de archivos (spoiler: no es posible …).
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class="pip">" +
"<img class="imageThumb" src="" + e.target.result + "" title="" + file.name + ""/>" +
"<br/><span class="remove">Remove image</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
// Old code here
/*$("<img></img>", {
class: "imageThumb",
src: e.target.result,
title: file.name + " | Click to remove"
}).insertAfter("#files").click(function(){$(this).remove();});*/
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});input[type="file"] {
display: block;
}
.imageThumb {
max-height: 75px;
border: 2px solid;
padding: 1px;
cursor: pointer;
}
.pip {
display: inline-block;
margin: 10px 10px 0 0;
}
.remove {
display: block;
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
}
.remove:hover {
background: white;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="files" name="files[]" multiple />
</div>Carga de varias imágenes con vista previa y eliminación de JQuery
Aprenderemos a cargar múltiples imágenes con vista previa y eliminar. En este tutorial, le mostraremos la carga de múltiples imágenes de jQuery con vista previa y eliminación de demostración.
En este tutorial, podemos subir muchas imágenes a la vez, eso también de una manera muy fácil, luego hoy subiremos jquery múltiples imágenes con vista previa. Carga de múltiples imágenes de jQuery con vista previa y eliminación de demostración
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Image Upload with Preview and Delete jQuery Plugin - phpcodingstuff.com</title>
<link href="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.css" rel="stylesheet">
</head>
<body>
<div id="drag-drop-area"></div>
<script src="https://transloadit.edgly.net/releases/uppy/v1.6.0/uppy.min.js"></script>
<script>
var uppy = Uppy.Core()
.use(Uppy.Dashboard, {
inline: true,
target: '#drag-drop-area'
})
.use(Uppy.Tus, {endpoint: 'https://master.tus.io/files/'}) //you can put upload URL here, where you want to upload images
uppy.on('complete', (result) => {
console.log('Upload complete! We’ve uploaded these files:', result.successful)
})
</script>
</body>
</html>
