Javascript 隐藏的iFrame文件上载在每次后续提交时提交额外的时间

我正在尝试为我的网站创建一个简单的文件上传表单。我使用一个隐藏的iFrame来实现“ajax”风格，这样我就可以让用户使用相同的表单一个接一个地上传文件

现在我有一个带有

的表单。我所做的是，当输入字段发生变化时（用户选择一个文件），它应该将设置了目标的表单提交到iFrame，iFrame加载一个php脚本，然后重置输入字段以允许用户再次上传。似乎发生的情况是，表单是根据表单提交的次数来提交的。e、 g如果在页面加载时按下按钮，它将提交一次，但是如果再次按下按钮（不重新加载页面），它将提交两次，如果第三次按下按钮，它将提交三次表单，依此类推

这是我的javascript，用于输入发生变化时

newupload是输入的id
newimgform是表单的id
postframe是iframe的id

$("#newupload").change(function() {
    var max = 5242880, iframe = $("#postframe"), iframeContents;
    $('#newimgform').attr("action", "uploadPicture.php")
    $('#newimgform').attr("method", "post")
    $('#newimgform').attr("MAX_FILE_SIZE", max)
    $('#newimgform').attr("enctype", "multipart/form-data")
    $('#newimgform').attr("encoding", "multipart/form-data")
    $('#newimgform').attr("target", "postframe")
    $('#newimgform').submit();
    $("#postframe").load(function() {
        iframeContents = jQuery.parseJSON($(this.contentDocument).find('body').html());
        alert(iframeContents.filename);
    $("#newimgform")[0].reset();
    });
});

---

我找了其他人尝试这个，我在这里看到了一些关于提交被绑定多次的答案，我需要使用unbind，比如

$（'newimgform'）。unbind（“submit”）.submit（）但这似乎没有任何作用。我不能使用任何flash上传程序或任何东西，因此这必须是纯html/javascript/php。
将
加载
事件处理程序绑定到
更改
事件处理程序之外。实际上，每次更改
#newupload
的值时，新的事件处理程序都会绑定到
#postframe
元素：

$("#postframe").load(function() {
    var iframeContents = jQuery.parseJSON($(this.contentDocument).find('body').html());
    alert(iframeContents.filename);
    $("#newimgform")[0].reset();
});
$("#newupload").change(function() {
    $(this).attr("action", "uploadPicture.php")
                    .attr("method", "post")
                    .attr("MAX_FILE_SIZE", 5242880)
                    .attr("enctype", "multipart/form-data")
                    .attr("encoding", "multipart/form-data")
                    .attr("target", "postframe")
                    .submit();
});

您也可以在每次运行
load
事件处理程序时解除其绑定，但在您的情况下，这似乎是不必要的<代码>$（this）.unbind（'load'）

是您必须添加到

load

事件处理程序的全部内容

---

你也可以优化这个，很多。当在jQuery中我们链接函数调用时，您反复使用相同的选择器。

您可以移出iframe加载处理程序，因为它不需要在每次上载文件时添加。你也可以像这样优化你的代码

$("#newupload").change(function() {
    $('#newimgform').attr({
       action: "uploadPicture.php",
       method: "post",
       MAX_FILE_SIZE: 5242880,
       enctype: "multipart/form-data",
       encoding: "multipart/form-data",
       target: "postframe",
    }).submit();
});

$("#postframe").load(function() {
    var iframeContents = jQuery.parseJSON($(this.contentDocument).find('body').html());
    alert(iframeContents.filename);
    $("#newimgform")[0].reset();
});

---

是否多次添加更改处理程序？问题是在更改函数中调用了iframe加载处理程序。由于ShankarSangoli和Jasper+1的原因，我没有想到要将对象传递到

.attr（）

，所以修复了此问题。在

load

事件处理程序中不使用

var

语句也是在创建一个全局变量。这做得很好！我猜表单没有多次提交，只是iframe多次执行加载功能！谢谢你，我快发疯了！