[英]Delete image preview before upload
我正在上传多张图像并显示预览,它工作正常。 当我想删除特定的预览图像时,预览图像被删除,但是当我上传所有文件时。 请检查。
我的表格:
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5">
Upload a file(.csv,.xls,.xlsx)
</div>
<div class="col-sm-12 col-md-6 col-lg-7">
<input type="file" class="form-control" id="gallery-photo-add" name="projectfile[]" multiple>
<div class="gallery">
</div>
</div>
</div>
</div>
Javascript
$(function() {
var imageArray = [];
var imagesPreview = function(input, placeToInsertImagePreview) {
var data = '';
if (input.files) {
var filesAmount = input.files.length;
for (let i = 0; i < filesAmount; i++) {
data +='<li>'+ input.files[i].name + '</li>';
var reader = new FileReader();
reader.onload = function(event) {
var image = '<a class="delete" data-value='+ i +'><img class="images" src='+ event.target.result +'><i class="fas fa-times closeicon" aria-hidden="true"></i> </a>';
$($.parseHTML(image))
.appendTo(placeToInsertImagePreview);
}
// console.log(input.files);
reader.readAsDataURL(input.files[i]);
imageArray.push(input.files[i]);
console.log(imageArray);
}
}
};
$('#gallery-photo-add').on('change', function() {
imagesPreview(this, 'div.gallery');
});
$("div.gallery").on('click','.delete',function(){
// console.log($(this).data("value"));
$(this).remove();
imageArray.splice($(this).data("value"),1);
console.log(imageArray);
});
});
多输入类型文件返回只读fileList
。 它包含File
对象的集合。 因此你不能简单地从这个列表中删除一个元素。
您必须使用AJAX来处理表单。 参考这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.