当客户端上传多张图像并预览该图像时,i / m正在删除图像。这是我的html
<div class="form-group">
<input id="image" class="" name="image[]" type="file" multiple />
<div class="preview clearfix">
</div>
<div class="upload-img">
<label for="image">
<u>Upload</u>
</label>
</div>
</div>
这是我的JS,用于上传图片和预览图片
$("#image").change(function(){
var total_file = document.getElementById('image').files.length;
for(var i = 0; i < total_file ; i++){
var html =
"<div class='img pull-left'>"
+"<img class='preview-img' data-id='"+i+"' id='preview-img-"+i+"' src='"+URL.createObjectURL(event.target.files[i])+"'>"
+"<img class='delete-img' image-id='#preview-img-"+i+"' src='{{ url('/media/error.svg')}}'>"
+'</div>';
$('.preview').append(html);
};
});
$(document).on('click', '.delete-img', function() {
var img = $(this).attr('image-id');
var id_img = $(img).attr('data-id');
var total_files = document.getElementById('image').files;
$(this).closest('.img').remove();
delete total_files[id_img];
});
我的问题是在UI中删除图像,但不删除元素图像。我想删除
中存在的DOM HTML和文件