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

重写太多了，但我可以指出你的代码有两个问题：

hierachy：你继续在之前的文件上传div中创建div。这些＆＃34;应该＆＃34;是兄弟姐妹，而不是孩子。将内容附加到.parent()元素
ID：s应该是唯一的。您的文件上传元素和归档文件都具有相同的ID，尝试将您拥有的abc递增变量添加到新创建的元素

Answer 2

演示： http://so.devilmaycode.it/javascript-add-remove-multiple-image-upload/

您的代码完全重写并且完全正常工作

$(function() {

    var files = {};

    $(document).on('change', '#file', function() {

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

        if (this.files && this.files[0]) {

            files[index] = this.files[0];

            var template =
                "<div id='file-wrapper-%d' class='file-wrapper' data-index='%d'>" +
                "<div class='image-wrapper'>" +
                "<a href='#' data-index='%d' title=' delete ' class='delete-image'>" +
                "<img src='https://cdn4.iconfinder.com/data/icons/simplicio/32x32/notification_error.png' alt=''/>" +
                "</a>" +
                "<img class='image-preview' alt='' src='%s' />" +
                "</div>" +
                "</div>";

            var reader = new FileReader();

            reader.onload = function(e) {

                $('#files-wrapper').append(template.replace(/(%d)/g, index).replace(/(%s)/g, reader.result));
                $("#file-wrapper-" + index).fadeIn(200);
            }

            reader.readAsDataURL(this.files[0]);

        }
    });

    $(document).on('click', '.delete-image', function(e) {
        e.preventDefault();
        var index = $(this).data('index');
        $('#file-wrapper-' + index).fadeOut(200, function(){
            $(this).remove();
            delete files[index];
        });
    });

    // see the demo for more code ....
});

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

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript添加删除多个图片上传

3 个答案: