Question

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

输入文件HTML

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

当我选择TWO图像时，文件数将变为TWO。但是当我使用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>

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

示例我选择了三个图像并进行预览。当我在第一张图像上单击“删除”按钮时，它仅删除第一张图像和“＃34; 3＆＃34;在输入文件中显示将更改为＆＃34; 2＆＃34;。

当我点击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和按钮的唯一值动态制作

修改

你也可以通过一个功能
来使用它
function hide(id){ $("#btnRemove_"+id).click(function{ $("#image_div"+id).css('opacity','0.3'); }); }

Answer 2

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

在我的一个应用程序中，我构建了一个文件列表，这些文件是使用＆lt; input＆gt;选择的。盒子，或拖拽＆amp;跌落在一个下降区：

var filesToUpload = [];

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

＆lt; input type =“file”＆gt;的更改处理程序看起来像这样：

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

请注意，我立即重置了表单，清除了＆lt; input type =“file”＆gt;框。

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

$("#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/

发生了什么：......很多

注意事项......

如果您加载文件并保存对它们的引用，则文件仍然存在。我们假设您加载2张图片，然后再次单击按钮并再加载3张图片。然后，如果您还没有获得对前2个文件的引用，那么它们就会消失。因此，如果你有参考，你有文件。
您需要让读者真正阅读文件。读者是异步的，这导致在读者的onload事件上放置回调句柄。当它完成时会触发它。您不能对所有加载的文件使用相同的阅读器，特别是对于多个文件，因为它实际上忙于读取它们并将引发错误。另外，我们很幸运，onload事件数据不包含对它刚读取的文件的任何引用。所以要跟踪你做下一件事......
使用闭包来保持轨道，即使当onload事件触发时，保存有关文件的信息的变量早已消失并被替换。但是因为我们在内部函数中使用它们，所以它们在内部函数的范围内保持活着。然后我们只是跟踪他们的数据和索引号的文件。通过按钮跟踪索引号码＆＃39;数据属性
因此，当删除项目时，它会从按钮的数据中获取索引，并通过设置将该值保持为null的数组位置来删除相应的文件。这将创建只包含具有库中文件及其数据的对象的数组，以及空洞。
所以当你想要的数组只包含当前在库中的文件时，你可以使用get clean函数，通过检查数组是否为null并将它们除去，将数组完整的数组返回到主数组。

以下代码：

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

单击清洁列表按钮并检查控制台。

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

3 个答案:

发生了什么：......很多