1
I’m making a upload simple multiple of files.
I can remove a thumbnail that creates to view, but I cannot remove the file that is in input.
I even put a alert, confirming that I can get the file name.
The problem is that it does not exclude from the input.
Follow what I’ve done so far.
/****** Upload múltiplo ******/
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var names = [];
for (var j = 0; j < $(this).get(0).files.length; ++j) {
alert($(this).get(0).files[j].name);
}
var nome_arquivo = "Imagem";
var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
var filename = $('input[type=file]').val().split('.').pop().toLowerCase();
if ($.inArray(filename, fileExtension) == -1) {
alert("Only formats are allowed : "+fileExtension.join(', '));
} else {
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=\"" + nome_arquivo + "\"/>" +
"<br/><span class=\"remove\">Remover</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
}
});
} else {
alert("Seu navegador não é compatível com File API")
}
});
/****** Upload múltiplo ******/ input[type="file"] {
display: block;
}
.imageThumb {
max-height: 100px;
border: 1px solid #e6e6e6;
padding: 1px;
}
.pip {
display: inline-block;
margin: 10px 10px 0 0;
}
.remove {
display: block;
background-color: #555;
border:1px solid #555;
color: #fff;
text-decoration: none;
font-size: 14px;
padding: 7px 0px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
text-align: center;
cursor: pointer;
}
.remove:hover {
background-color: #989898;
border: 1px solid #989898;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Steps</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- 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>
</head>
<body>
<div class="container">
<div class="row">
<div class="field" align="left">
<h3>Upload your images</h3>
<input type="file" id="files" name="upload[]" onkeypress="changeTitle.call(this)" multiple="multiple" />
</div>
</div>
</div>
</body>
</html>If I upload two images for example, two blocks will appear, each with its delete button and, in the input, it will be "2 files".
When deleting the image, I would need to delete the file as well, but that’s what I’m struggling with.
How about: jQuery File Upload Demo
– Marconi