обновление страницы перед загрузкой файла на сервер, альтернатива функции protectDefault

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']);

}

?>

Я не хочу использовать функцию protectDefault (), вы, ребята, знаете альтернативу ей?
Спасибо.

Answer 1

Вы путаете два разных метода здесь.

Используя AJAX, вы отправляете информацию на сервер и (обычно) ожидаете результата от сервера без обновления страницы .

Используя SUBMIT, вы отправляете запрос на сервер и заменяете текущую страницу результатом (поэтому любой метод AJAX больше не будет на странице для получения результата).

В другой заметке, как вы упомянули, какие события на вашей странице произойдут после отправки формы?.

Answer 2

Хорошо, вы хотите отправить форму после загрузки файла? Затем добавьте preventDefault в обработчик кликов (или используйте type="button") и добавьте $('#myForm').submit() в обратном вызове успеха (и, конечно, дайте форме идентификатор).