如何动态删除选定的图像文件jQuery

Question

我可以选择多个图像文件并在 div 中预览。每张图片的下方都有一个按钮。

输入文件 HTML

<input type="file" class="span3" id="file[]" name="file[]" multiple />

当我选择两张图片时，文件数将变为两张。但是当我使用 jquery 删除图像 div 时，文件的数量仍然是两个。它表明 jquery 只是删除了 div，但现在删除了文件数。

这是我的 HTML

IMAGE 1
<div id="image_div0" class="image_div">
<div style="height: 190px;">
<img class="thumb" src="blob:http%3A//localhost%3A8888/902e3e76-d381-4b0a-9c45-f7be3b2eb7c9"/>
</div>
<div>
<button id="btnRemove_0" class="btn btn-primary" type="button">Remove</button>
</div>
</div>

IMAGE 2
<div id="image_div1" class="image_div">
<div style="height: 190px;">
<img class="thumb" src="blob:http%3A//localhost%3A8888/ce22463e-156e-4444-b193-7c1505ee1d6f"/>
</div>
<div>
<button id="btnRemove_1" class="btn btn-primary" type="button">Remove</button>
</div>
</div>

如何从图像文件中动态删除点击的图像..？

示例我选择了三个图像并预览它。当我在第一张图片上点击删除按钮时，它只删除第一张图片，输入文件中显示的“3”的数量将变为“2”。

当前我在单击 REMOVE 按钮时为图像应用不透明度。

$('.image_div').find('button').live('click', function(){
            var selected_image_id = $(this).parents().parents().html();
            $(this).parent('div').parent('div').find('div').css({
                'opacity' : 0.3,
            });

            $(this).css('cursor','default')
        });

Answer 1

你也可以用作

$("#btnRemove_0").click(function{
   $("#image_div0").css('opacity','0.3');
});

这只是一个示例您还可以使用 div 和 button 的唯一值动态制作

编辑

你也可以只通过一个函数来使用它

function hide(id){
 $("#btnRemove_"+id).click(function{
       $("#image_div"+id).css('opacity','0.3');
    });
}

Answer 2

较新版本的浏览器具有 FormData 对象，您可以使用该对象维护文件列表并通过 ajax 调用提交它们。

在我的一个应用程序中，我构建了一个文件列表，这些文件要么使用 框选择，要么拖放到 dropzone 中：

var filesToUpload = [];

function addFilesToList(files) {
    $.each(files, function() {
        filesToUpload.push(this);
        var $li = $("<li/>").text(this.name);
        $li.appendTo($("#import-dialog .file-list"));
    });
}

的更改处理程序如下所示：

$("#files").on("change", function(e) {
    e.preventDefault();
    e.stopPropagation();
    addFilesToList($("#files").prop("files"));
    $("#import-dialog form")[0].reset();
});

请注意，我立即重置了表单，这会清除 框。

然后我在表单的提交事件上有一个处理程序：

$("#import-dialog form").on("submit", function(e) {
    e.preventDefault();
    e.stopPropagation();
    var fd = new FormData();
    fd.append("ajax", "true");
    $.each(filesToUpload, function() {
        fd.append("files[]", this);
    });
    $.ajax({
        url: "import.php",
        type: "POST",
        data: fd,
        processData: false,  // tell jQuery not to process the data
        contentType: false   // tell jQuery not to set contentType
    }).done(function() {
        window.location.reload();
    }).fail(function (jqXHR, textStatus) {
        alert("Error: " + textStatus);
    });
});

我还有一个清除列表的按钮：

$("#im-clear").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    filesToUpload = [];
    $("#import-dialog form")[0].reset();
    $("#import-dialog .file-list").empty();     
});

但在您的情况下，您只需从数组中删除一个元素：

$('.image_div button').live('click', function(){
    var $div = $(this).closest(".image_div"),
        parts = /^image_div([0-9]+)$/.exec($div.attr("id")),
        index = parseInt(parts[1]);
    $div.remove();
    filesToUpload.splice(index,1);
});

更新：

我忘了：您还需要重新编号以下 div：

$('.image_div button').live('click', function(){
    var $div = $(this).closest(".image_div"),
        parts = /^image_div([0-9]+)$/.exec($div.attr("id")),
        index = parseInt(parts[1]);
    $div.remove();
    filesToUpload.splice(index,1);
    $('.image_div').each(function() {
        var parts2 = /^image_div([0-9]+)$/.exec($(this).attr("id")),
            index2 = parseInt(parts2[1]);
        if (index2 > index) {
            $(this).attr("id","image_div" + (index2-1));
        }
    });
});

更新 2：

哦！我看到按钮的 ID 中也有一个索引。我会删除 ID：您始终可以使用选择器“#image_divN button”访问按钮。

Answer 3

Jsfiddle： http://jsfiddle.net/techsin/vs7PT/5/

发生了什么：...很多

注意事项..

1. 如果您加载文件并保存对它们的引用，则文件将保留。假设您加载了 2 张图像，然后再次单击按钮并再加载 3 张。然后，如果您没有获得对前两个文件的引用，那么它们就消失了。因此，如果您有参考资料，您就有文件。

2. 您需要制作一个阅读器才能真正阅读文件。并且阅读器是异步的，这导致将回调句柄放在阅读器的onload 事件上。完成后会触发。您不能对所有加载的文件使用相同的阅读器，尤其是多个文件，因为它实际上正忙于阅读它们并会引发错误。另外，我们很幸运，onload 事件数据不包含对它刚刚读取的文件的任何引用。所以为了跟踪你做接下来的事情..

3. 轨道是通过使用闭包来保存的，即使当 onload 事件触发时，保存有关文件信息的变量早已消失并被替换。但是由于我们在内部函数中使用了它们，所以它们在该内部函数的范围内保持活跃。然后我们只跟踪文件的数据和索引号。通过按钮的数据属性跟踪索引号

1234563这将创建一个数组，该数组仅包含具有图库中的文件及其数据的对象以及空洞。 1234563

代码如下：

var files=[];
//once refered,  files are not lost after rechossing files..
$('#file').change(function(v){
     $.each(v.target.files,function(n,i){
        var reader = new FileReader(); //need to create new ones...they get busy..
        reader.readAsDataURL(i);
        reader.onload = (function(i) {
            return function(x) {
                files.push({file:i,data:x.target.result});
                updateList(files.length-1);
            }
        })(i);
     });
});

var thumb= $('.thumb').clone().show(), gallery= $('.gallery');

function updateList(n) {
    var e = thumb.clone();
    e.find('img').attr('src',files[n].data);
    e.find('button').click(removeFromList).data('n',n);
    gallery.append(e);

    function removeFromList() {
        files[$(this).data('n')] = null;
        $(this).parent().remove();
    }    
}

//Get clean Array full of files.: no removed files..nullss...

function getClean() { 
    var arr=[];
    $.each(files,function(n,i) { 
        if ( i !== null ) arr.push(i.file);
    });
    return arr;
}
$('#clean').click(function(){console.log(getClean());});

单击 Cleanlist 按钮并检查控制台。