Php jquery清除ajax并隐藏div对象

不知道发生了什么事。我试图通过AJAX将用户文件从

index.html

文件上传到

upload.php

，然后将文件短url代码返回给用户

在我的例子中，一旦用户上传了文件，它就会给出链接，然后如果他通过F5在没有整页刷新的情况下上传另一个文件，脚本将重新上传上一个文件和新文件，为上一个文件创建另一个短代码，为新文件创建新的短代码

更不用说，由于某种原因，在上传新文件后，返回给用户的带有链接的实际div不会消失，所以用户会得到旧文件的代码和新文件的代码，而我并不想要这些代码

一旦上传了一个文件，帖子就不应该再上传了，一旦用户上传了一个新文件，div应该只有新文件的短代码，但是没有两个div，有两个不同的代码

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

（函数（）{
var input=document.getElementById（“图像”），
formdata=false；
函数showUploadedItem（源代码）{
var list=document.getElementById（“图像列表”），
li=document.createElement（“li”），
img=document.createElement（“img”）；
a=document.createElement（“a”）；
img.src=源；
李.儿童（img）；
表1.儿童（李）；
a、 href=来源；
}   
if（window.FormData）{
formdata=新的formdata（）；
document.getElementById（“btn”）.style.display=“无”；
}
input.addEventListener（“更改”，函数（evt）{
document.getElementById（“响应”）.innerHTML=“”
var i=0，len=this.files.length，img，reader，file；
对于（；i

---

您可以在以下位置测试该站点：尝试上载一个文件，然后在获得短链接后再上载另一个文件，这样您就会理解我的意思。

我访问了您在问题中的url，我注意到表单中的

输入实际上启用了
多个
选项，如果每次只想上载一个文件，我认为您需要删除此选项。
文件是否实际上载到服务器？因为Ajax不能直接处理文件上传，您必须使用iframe或类似的工具来完成此操作，而无需页面刷新。文件将通过POST方法推送到upload.php，然后由upload.php处理通过AJAX表单提交的文件的移动。为什么在jQuery环境中使用
document.getElementById
stuff？@moonwave99这相当简单仍然使用jQuery1.6.2的旧代码，我从没有重写过它reason@danL实际上，使用fileReader和formdata API可以在支持这些API的浏览器中通过AJAX上传（不是在IEOK中，多行被删除。但是，尝试上载一个图像，然后上载下一个图像，发生的情况是，您将获得指向同一文件的两个链接，精确地说，第一个重新上载的文件。并且，您添加的文件越多，您将获得的新链接越多，因为您上载的旧文件将再次被重新上载并重新加载。）这是不应该发生的