Question

我在互联网上找到了一个上传多张图片的代码。当您选择图像时，它会在下面显示所选图像作为预览，现在问题是如果我选择了错误的图像并且我想删除该特定图像，也应该允许不超过4个图像希望你得到我想说的是下面的代码

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

和代码的jquery是

    $(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

Answer 1

HTML5文件输入的文件列表是只读的。因此，无法从多个文件选择中删除单个文件。

通过重置表单来清空文件输入是完全可以的。你无法修改它。因此，如果您使用4个单独的单个文件选择，那么清除用户正在删除的文件就很简单了：

<强> HTML：

<form>
    <input type="file" name='images[]' class="gallery-photo-add" id='image1' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image2' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image3' />
    <input type="file" name='images[]' class="gallery-photo-add" id='image4' />
</form>
<div class="gallery"></div>

<强> JS：

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(placeToInsertImagePreview) {

        // Empty preview so we can safely rebuild it
        $(placeToInsertImagePreview).empty();

        // Get all files
        var elems = document.getElementsByClassName("gallery-photo-add");

        // Loop through each file and append them to the preview if available
        for (i = 0; i < elems.length; i++) {
            if (elems[i].files.length != 0) {
                var reader = new FileReader();
                var id = $(elems[i]).attr('id');

                reader.onload = (function(id) {
                    return function(e){
                        $($.parseHTML('<img>')).attr({
                            'src' : e.target.result,
                            'data-id' : id
                        }).appendTo(placeToInsertImagePreview);
                    }
                })(id);

                reader.readAsDataURL(elems[i].files[0]);
            }
        }
    };

    // Temporarely wrap a form element around the input to reset it
    window.reset = function(e) {
        e.wrap("<form>").closest('form').get(0).reset();
        e.unwrap();
    }

    $('div.gallery').on('click', 'img', function() {
        var id = $(this).attr("data-id");
        reset($('#'+id));
        $(this).remove();
    });

    $('.gallery-photo-add').on('change', function() {
        imagesPreview('div.gallery');
    });
});

您可以在此处进行测试：https://jsfiddle.net/81nytqsc/2/

Answer 2

 $('div.gallery').on('click','img',function(){
 var files= $('#gallery-photo-add).get(0).files;
 for(i=0;i<files.length;i++){
 if(files[i]==$(this).attr('src')){
 files= jQuery.grep(files, function(value) {
return value != files[i];
 }
 }
 }
 $(this).remove();
 });

如何从预览中删除所选图像？

2 个答案: