时间戳

首页 > 解决方案 > 上传前删除图片预览

javascript - 上传前删除图片预览

问题描述

我正在上传多张图片并显示预览，它工作正常。当我想删除特定的预览图像时，预览图像被删除，但是当我上传所有文件时，所有文件都在上传。请检查。

我的表格：

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

标签： javascriptjquerylaravel

解决方案

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

您必须使用AJAX来处理表单。参考这个问题。

推荐阅读