0

不知道发生了什么。我正在尝试通过 AJAX 从index.html文件上传用户文件，该文件运行 POST upload.php，然后将文件短 url 代码返回给用户。

在我的情况下，一旦用户上传文件，它会提供链接，然后如果他通过 F5 去上传另一个没有完整页面刷新的文件，脚本将重新上传以前的文件，新文件会为以前的文件创建另一个短代码和新文件的新短代码

更不用说由于某种原因，一旦上传新文件，带有返回给用户的链接的实际 div 就不会消失，因此用户会获得旧文件的代码和我不完全想要的新文件的代码。

文件上传完成后，POST 不应再拥有它，一旦用户上传新文件，div 应该只有新文件的短代码，但没有 2 个 div 和 2 个不同代码的旧新文件。

这是jQuery代码

(function () {
    var input = document.getElementById("images"), 
        formdata = false;

    function showUploadedItem (source) {
        var list = document.getElementById("image-list"),
            li   = document.createElement("li"),
            img  = document.createElement("img");
            a    = document.createElement("a");
        img.src = source;
        li.appendChild(img);
        list.appendChild(li);
        a.href = source;
    }   

    if (window.FormData) {
        formdata = new FormData();
        document.getElementById("btn").style.display = "none";
    }

    input.addEventListener("change", function (evt) {
        document.getElementById("response").innerHTML = "<div class='uploading'></div>"
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) { 
                        showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }

        if (formdata) {
            $.ajax({
                url: "upload.php",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
                success: function (res) {
                    document.getElementById("response").innerHTML = res;                    
                }
            });
        }
    }, false);
}());

您可以在以下位置测试该站点：cyogen.com尝试上传一个文件，然后在获得短链接后再上传另一个文件，您就会明白我的意思。

4

1 回答 1

1

我访问了您在问题中的 url，我注意到input您的表单中实际上启用了允许上传多个文件multiple的选项，我认为如果您希望每次只上传一个文件，则需要删除此选项。

于 2012-12-29T18:05:26.833 回答