Question

我正在编写一个片段，通过AJAX上传图片。用户在表单文件输入中选择图像。该表单有一个onsubmit-function，可以防止默认，因此页面在提交后不会重新加载。在此函数中，将捕获formdata，而不是通过附加了一些事件侦听器的XMLHttpRequest发送。还有“加载”-eventlistener。这个“加载”功能包括隐藏加载器和回声“完成上传”之类的事情。通过ajax传输数据的页面有一个php脚本，可以缩放图像，复制图像，重命名等等。它会以不同的图像尺寸创建各种副本。

问题：如果我通过ajax提交表单，一切都很好。 php需要几秒钟，直到一切都被保存并且页面被加载。通过Ajax，在提交表单后直接显示“已完成”，但php脚本未执行！感觉就像AJAX阻止PHP运行脚本。 “负载”功能被激活了！但是要早点出发！提交后几乎就是直接......

这是JS代码：

loader("show");
window.event.preventDefault();
var data = $(form).serializeArray();
var src = form.getAttribute("action");
$.post( src, data )
.done(function( data ) {
    loader("hide");
});

我也用干净的JS测试过，但同样的问题：

var formdata = $(form).serializeArray();
var page = form.getAttribute("action");
loader(show);
var ajax = new XMLHttpRequest();
ajax.addEventListener("load", function(event) { completeHandler(event);}, false);
ajax.open("POST",page);
ajax.send(formdata);

completeHandler：

function completeHandler ( evt ) {
    alert("finished");
    loader("hide");
}

感谢您的帮助！：）

编辑： HTML：

<form method="post" action="create.php" onSubmit="uploadForm(this)" enctype="multipart/form-data">
<input id="file1" type="file" name="image">
<input type="submit" value="Add" name="submit">
</form>

Answer 1

我有一种感觉，它被解雇的原因是你没有取消触发该功能的默认动作。您需要调用preventDefault或return false来停止默认操作，导致页面退出，从而中止Ajax调用。

function uploadForm () {
//function uploadForm (event) {   
    //event.preventDefault();  //cancel the default action
    loader("show");
    //window.event.preventDefault();  <-- get rid of this
    var data = $(form).serializeArray();
    var src = form.getAttribute("action"); 
    $.post( src, data )
    .done(function( data ) {
        loader("hide");
    });
    //or
    return false;
}

编辑：

您发布的是您正在调用它onsubmit，因此您需要取消提交。将return添加到您的方法中的onsubmit和上面的return false。

<form onSubmit="return uploadForm(this)" ...>

AJAX load-eventlistener在从服务器获得响应之前触发

1 个答案: