Question

我正在上传多张图像并显示预览，效果很好。当我想删除特定的预览图像时，预览图像被删除，但是当我上传时，所有文件都在上传。请检查。

我的表单：

<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);
     });
});

Answer 1

多个输入类型的文件返回只读 fileList。它包含File个对象的集合。因此，您不能简单地从此列表中删除一个元素。

您必须使用 AJAX 来处理表单。请参阅this问题。

上传前删除图像预览

1 个答案: