Javascript添加删除多张图片上传

Question

我正在创建添加删除图像上传。当我添加 1 个图像的文件时，它将自动创建新的输入文件属性而无需单击按钮（仅单击输入属性）。

当我点击del图标删除图片文件时，图片的预览已被移除，但该图片的输入属性仍然存在，并且提交的所有图片文件的结果都包含删除的图片。

你能帮我修改这个javascript，所以当我删除图像时，它也会删除属于它的图像的输入属性，好吗？

    var abc = 0;
    $(document).ready(function() {
    $('body').on('change', '#file', function(){
        if (this.files && this.files[0]) {
            abc += 1;   
            $(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");

            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);

    //      $(this).hide();
            $("#abcd"+ abc).append($("<img/>", {id: 'x', src: 'x.png', alt: 'delete'}).click(function() {
                $(this).parent().remove();
            }));
        }
        $(this).after($("<div/>", {id: 'filediv'}).fadeIn('slow').append(
                    $("<input/>", {name: 'file[]', type: 'file', id: 'file'})
        ));
    });

    //To preview image     
        function imageIsLoaded(e) {
            $('#previewimg' + abc).attr('src', e.target.result);
        };
    });

    #file{
        color:green;
        padding:5px; border:1px dashed #123456;
        background-color: #f9ffe5;
    }

    #x{ 
        width: 17px;
        height: 17px;
        border: none; 
        margin-left: -20px;
        margin-top: 1px;
        cursor: pointer;
        position: absolute;
    }

    .abcd img{
        height:100px;
        width:100px;
        padding: 5px;
        border: 1px solid rgb(232, 222, 189);
    }

    <form enctype="multipart/form-data" action="" method="post">
        <div id="filediv">
            <input name="file[]" type="file" id="file"/>
        </div><br/> 
        <input type="submit" value="Upload File" name="submit"/>
    </form>

running on jsfiddle

Answer 1

重写太多，但我可以指出您的代码存在两个问题：

1. 层次结构：您不断在之前的文件上传 div 中创建 div。这些“应该”是兄弟姐妹而不是孩子。将东西附加到.parent() 元素

2. ID:s 应该是唯一的。您的文件上传元素和filedivs都具有相同的ID，尝试将abc增量变量添加到这些新创建的元素中

Answer 2

• 演示： https://so.lucafilosofi.com/javascript-add-remove-multiple-image-upload/

您的代码完全重写并完全正常运行

   var files = [];
    $(document).on('change', '#file', function() {

        var index = $('.file-wrapper').length ? $('.file-wrapper:last-child').data('index') + 1 : 0;

        if (this.files) {

            console.log('files', this.files);

            $.each(this.files, function(i, file) {

                var reader = new FileReader();

                files[index] = file;

                var template = '<div id="file-wrapper-%d" data-index="%d" class="col-4 file-wrapper">' +
                    '<div class="card p-2">' +
                    '<div class="card-header p-2"><strong>' +
                    file.name +
                    '</strong></div><div class="card-body p-2 text-center">' +
                    '<img src="%s" class="img-fluid" alt="" style="max-height:150px" /></div>' +
                    '<div class="card-footer p-2">' +
                    '<a href="#" data-index="%d" class="float-left delete-image btn btn-sm btn-danger"><i class="fas fa-trash-alt"></i></a>' +
                    '<strong class="float-right">' +
                    formatSizeUnits(file.size) +
                    '</strong>' +
                    '</div>' +
                    '</div></div>';


                reader.onload = function(e) {

                    console.log('reader', reader, e);

                    // create the form data object
                    // and pass some additional parameters

                    var data = new FormData();
                    data.append('fileName', file.name);
                    data.append('fileIndex', index);
                    data.append('fileBlob', reader.result);
                    data.append('action', 'upload');

                    // upload to server
                    $.ajax({
                        type: 'POST',
                        url: 'api.php',
                        data: data,
                        processData: false,
                        contentType: false
                    }).done(function(json) {
                        console.log('ajax:upload', json);
                        $('#files-wrapper').append(template.replace(/(%d)/g, index).replace(/(%s)/g, reader.result));
                        $("#file-wrapper-" + index).fadeIn(200);
                        index++;
                    });
                }
                reader.readAsDataURL(file);
            });
        }
    });

• 查看 css 代码的演示源...

Answer 3

尝试使用下面的代码，我已将所有 id 属性更改为 class 属性，因为您不能为不同的元素创建相同的 id。 ID 始终是唯一的。

var abc = 0;
$(document).ready(function() {
$('body').on('change', '.file', function(){
	
	if (this.files && this.files[0]) {
		abc += 1;	
		$(this).before("<div id='abcd"+ abc +"' class='abcd'><img id='previewimg" + abc + "' src=''/></div>");
	   
		var reader = new FileReader();
		reader.onload = imageIsLoaded;
		reader.readAsDataURL(this.files[0]);
//		$(this).hide();
		$("#abcd"+ abc).append($("<img/>", {class: 'delete-icon', src: 'x.png', alt: 'delete'}).click(function() {
			$(this).closest(".filediv").remove();
		}));
	}
   	$(this).closest(".filediv").after($("<div/>", {class: 'filediv'}).fadeIn('slow').append(
                $("<input/>", {name: 'file[]', type: 'file', class: 'file'})
   	));
});

//To preview image     
    function imageIsLoaded(e) {
        $('#previewimg' + abc).attr('src', e.target.result);
    };
});

.file{
    color:green;
    padding:5px; border:1px dashed #123456;
    background-color: #f9ffe5;
}

.delete-icon{ 
    width: 17px;
    height: 17px;
    border: none; 
    margin-left: -20px;
    margin-top: 1px;
	cursor: pointer;
    position: absolute;
}

.abcd img{
    height:100px;
    width:100px;
    padding: 5px;
    border: 1px solid rgb(232, 222, 189);
}

<form enctype="multipart/form-data" action="" method="post">
    <div class="filediv">
        <input name="file[]" type="file" class="file"/>
    </div><br/>	
    <input type="submit" value="Upload File" name="submit"/>
</form>

Answer 4

<input type="file" id="fileInput" name="image[]" multiple class="opacity-0" />
<div id="thumb-output" class="grid grid-cols-3 gap-2"></div>

<div class="bg-black text-white rounded p-2 cursor-pointer mt-5" id="showFiles">Show Files</div>


<script type="text/javascript">
//Preview
$("#fileInput").on("change", function(e) {
    var files = e.target.files;
    var filesLength = files.length;
    for (var i = 0; i < filesLength; i++) {
        var f = files[i]
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
            var file = e.target;
            var img = '<div class="img-wrap"><span id="deleteImage" class="delete-image text-2xl cursor-pointer" data-name="'+file.name+'">&times;</span><img class="rounded" src="'+e.target.result+'" ></div>';
            $('#thumb-output').append(img);
        });
        fileReader.readAsDataURL(f);
    }
});

//Remove
$(document).on('click','#deleteImage',function(){
    var pips = $('.img-wrap').toArray();
    var $selectedPip = $(this).parent('.img-wrap');
    var index = pips.indexOf($selectedPip[0]);

    var dt = new DataTransfer();
    var files = $("#fileInput")[0].files;

    for (var fileIdx = 0; fileIdx < files.length; fileIdx++) {
        if (fileIdx !== index) {
            dt.items.add(files[fileIdx]);
        }
    }

    $("#fileInput")[0].files = dt.files;

    $selectedPip.remove();
});

//Check current files
$(document).on('click','#showFiles',function(event){
    event.preventDefault();
    var data = $('#fileInput')[0].files; //this file data
    const fileListArr = Array.from(data);
    var fileName = $(this).data("name");

    for(i = 0; i < fileListArr.length; ++ i){
        console.log(fileListArr[i]);
    }
});

</script>