Javascript（Jquery library 1.9.1）多文件上传ajax删除文件失败答案

【问题标题】：Javascript (Jquery lib 1.9.1) Mutli file-upload ajax delete files failingJavascript（Jquery library 1.9.1）多文件上传ajax删除文件失败
【发布时间】：2013-10-08 12:59:21
【问题描述】：

我已经开始编写这个脚本，它允许您一次上传多个文件。所以我还没有进入上传部分，只是文件存储等。

到目前为止，我已经完成了文件添加，添加文件后，它会创建一个 div 以便用户可以看到他将要上传的文件。

工作得很好。

现在我为每个 div 添加了一个 id，例如：<div id="file_filename" class="files">Filename</div> 现在，如果您单击文件名，我想将其删除。

所以我添加了一个文件删除功能，如下所示：

（我从 document.body 加载，因为它不是自然 div）

$(document.body).on("click", ".files", function(e) {
    console.log("Sent id: " + e.target.id);
    removeFile(e.target.id);
});

function removeFile(file) {
    var split = file.split("file_");
    console.log("Now going to loop for file: " + file);
    console.log("Splitted version: " + split[1]);
    for (i = 0; i < images.length; i++) {
        if (images[i].name != split[1]) {
            continue;
        }
        console.log("removed " + split[1] + " with index: " + i + " and file name: " + images[i].name);
        images.pop(i + 1);
    }

    updateDivs();

    console.log("files left: ");
    for (i = 0; i < images.length; i++) {
        console.log(images[i].name);
    }
}

基本上，它获取点击类的 ID，并将 id 发送给 removeFile 函数。 removeFile 函数将分割文本，以便在file_ 之后获取文件名

然后我遍历图像数组并检查名称是否相等，如果是则删除该文件并重新加载 div。

重新加载 div 函数：

function updateDivs() {
    var divs;
    for (i = 0; i < images.length; i++) {
        divs = (divs != null) ? divs + "<div id='file_" + images[i].name + "'class='files'>" + images[i].name + "</div>" : "<div id='file_" + images[i].name + "'class='files'>" + images[i].name + "</div>";
    }
    $("#myImages").html(divs);
}

如您所见，我有很多日志正在更新，因此在删除后，我会收到以下日志：

Sent id: file_images.jpg upload.js:82
Now going to loop for file: file_images.jpg upload.js:63
Splitted version: images.jpg upload.js:64
removed images.jpg with index: 0 and file name: images.jpg upload.js:69
files left:  upload.js:75
images.jpg

问题：

如果您注意到，我点击了 images.jpg，然后它说它已删除 images.jpg，但随后它说 files left: images.jpg。

它没有删除 images.jpg，而是删除了我上传的另一个文件。

我已经尝试了我所知道的一切，我知道自己解决这些问题是最好的，但是这个问题对我来说毫无意义。

我做错了什么？

编辑：顺便说一下，images[0] = images.jpg，我已经先上传了。

【问题讨论】：

标签： javascript jquery html upload

【解决方案1】：

不知道您的图像数组是什么样的，这可能不是 100% 正确，但我怀疑您的问题与 images.pop(i + 1); 行有关

.pop() 不接受任何参数，只删除数组中的最后一项。如果要按索引从数组中删除元素，请像这样使用splice()：

images.splice(i-1, 1);（将删除当前 for 循环索引处的 1 项）

一个例子：

<script type="text/javascript">

var images = ["banana", "orange", "apple"];
images.splice(1,1);     // Will remove 1 item at position 1 (orange)
alert(images);          // Should read: "banana, apple"

</script>

希望这会有所帮助。

【讨论】：