I'm putting together a multiple file upload form. What I have so far is almost good. When uploading, the option to remove the file is generated before submitting the form (a preview). You are removing the preview, but you are not removing it from the input. If it were to clean everything that is in the input, just give the command "$ JQuery ('# image_file'). Val (" ");", for example. But in this case, I would need to exclude from the input the same file that I exclude in the preview. Is it possible to delete only the given file in the input?
Here's what I've done so far.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiplo</title>
<!-- Jquery -->
<script type="text/javascript" src="https://www.agenciamove.com.br/js/jquery-1.11.2.min.js"></script><!--Boostrap--><linktype="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><scripttype="text/javascript">
/****** Upload múltiplo ******/
$(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\">Remover imagem</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else {
alert("Your browser doesn't support to File API")
}
});
/****** Upload múltiplo ******/
</script>
<!-- ****** Upload múltiplo ****** -->
<style type="text/css">
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;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="files" name="files[]" multiple />
</div>
</div>
</div>
</body>
</html>