Question

不确定发生了什么。我正在尝试通过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尝试上传一个文件，然后在您获得短链接后上传另一个文件，然后您将了解我的意思。

Answer 1

我访问了您在问题中提到的网址，我注意到您表单中的input实际上启用了multiple选项allows multiple files to be uploaded，我认为您需要删除此选项如果你想每次只上传一个文件。

jquery清除ajax并隐藏div对象

1 个答案: