Hi guys. The problem of removing a preview image is solved, but I also need to remove that same image from the input. I tried a lot of ways, but no success. Below is my html and the script that I am using. I don't if this is the best way to do what I'm trying to do. I searched a lot but I lot of people had the same issue, but no answer. I only found a way to remove all the images from input, not the one that I removed from the preview. Hope you guys can save me!.
function handleFileSelect(event) {
var input = this;
if (input.files && input.files.length) {
var filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
var reader = new FileReader();
this.enabled = false
reader.onload = (function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img id="test" class="thumb" src="', e.target.result, '" title="', escape(e.name), '"/><span class="remove_img_preview"></span>'].join('');
document.getElementById('preview').insertBefore(span, null);
});
reader.readAsDataURL(input.files[i]);
}
}
}
$('#photos').change(handleFileSelect);
$('#preview').on('click', '.remove_img_preview', function() {
$(this).parent('span').remove();
$(this).val("");
});.thumb {
width: 80px;
height: 50px;
margin: 0.2em -0.7em 0 0;
}
.remove_img_preview {
position: relative;
top: -12px;
right: 7px;
background: black;
color: white;
border-radius: 50px;
font-size: 0.9em;
padding: 0 0.3em 0;
text-align: center;
cursor: pointer;
}
.remove_img_preview:before {
content: "×";
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="{{route('employee.store.settlement')}}" enctype="multipart/form-data" method="POST">
<div class="form-group">
<label for="photos">Selecione fotos do povoado</label>
<input type="file" name="photos[]" id="photos" multiple="multiple" accept="image/*">
</div>
<div class="form-group" style="float: right">
<button type="submit" class="btn btn-success">Cadastrar</button>
</div>
<div>
<style>
</style>
<div id="preview"></div>
</div>
</form>
