Question

我正在尝试使用ajax从表单上载文件，但遇到一个问题，当我提交表单时，页面会刷新，因此文件没有完全上载到服务器，这是我的代码：

<form enctype="multipart/form-data">
     <input id="sortpicture" type="file" name="sortpic" />
     <button id="upload">Upload</button>
 </form>

jQuery文件：

$('#upload').on('click', function(e) {
var file_data = $('#sortpicture').prop('files')[0];   
var form_data = new FormData();                  
form_data.append('file', file_data);
console.log(form_data);                             
$.ajax({
    url: 'upload.php', // point to server-side PHP script 
    dataType: 'text',  // what to expect back from the PHP script, if anything
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(php_script_response){
        alert(php_script_response); // display response from the PHP script, if any
    }
 });

 });

php文件：

<?php

if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
}
else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);

}

?>

我不想使用preventDefault（）函数，你们知道吗？
谢谢。

Answer 1

好的，因此，您希望在文件上传后提交表单吗？然后将preventDefault添加到您的点击处理程序中（或使用type="button"），然后在成功回调中添加一个$('#myForm').submit()（当然，请给表单一个ID）。

Answer 2

您在这里混淆了两种不同的方法。

使用AJAX，您将信息发送到服务器，并且（通常）等待服务器的结果，而不会刷新页面。

使用SUBMIT，您将请求发送到服务器，并用结果替换当前页面（这样，任何AJAX方法将不再在页面上接收结果）。

正如您提到的，在另一条记录上，提交表单后页面上会发生什么事件？

在服务器上载文件之前刷新页面，可以替代preventDefault函数

2 个答案: