Question

我正在尝试为我的网站创建一个简单的文件上传表单。我正在使用隐藏的iFrame来执行“ajax”样式，因此我可以使用相同的表单一个接一个地上传文件。

现在我有一张<input type="file" />的表单。我发生的事情是当输入字段发生变化（用户选择文件）时，它应该将目标设置的表单提交给加载php脚本的iFrame，然后重置输入字段以允许用户再次上载。似乎发生的是表单根据表单提交的次数提交。例如，如果您在页面加载时按下按钮它将提交一次，但是如果您再次按下按钮（不重新加载页面）它将提交两次，当您第三次按下按钮时它将提交表单三次等等。

以下是输入更改时的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();
    });
});

我找了其他人尝试这个，我在这里看到了一些答案，谈论提交被绑定多次，我需要像$('#newimgform').unbind("submit").submit();一样使用unbind，但这似乎没有做任何事情。我不能使用任何flash上传器或任何东西，所以这必须是纯html / javascript / php。

Answer 1

您可以移出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();
});

Answer 2

将load事件处理程序绑定在change事件处理程序之外。实际上，每次更改#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文件上载会在每次后续提交时提交额外的时间

2 个答案: