1
I’m putting together a multi-file upload form. What I have so far is almost fine. When uploading, the option to remove the file is generated before submitting the form (a preview). It is removing from preview, but it is not removing from input. If you were to clear everything in the input, just give the command "$Jquery('#image_file'). val("");", for example. But in case, I would need to delete from input the same file I deleted in preview. It would be possible to delete only the particular file in the input?
Follow 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 -->
<link type="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>
<script type="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>
Got your problem solved?
– Sérgio Machado