Почему страница перезагружается при загрузке файла с помощью ajax?

Question

Я использую ajax для загрузки файла из формы.Все работает нормально, файл загружается, но когда я нажимаю на кнопку загрузки, чтобы загрузить файл после загрузки, страница файла перезагружается.Как предотвратить перезагрузку страницы после загрузки файла?

HTML:

 <form enctype="multipart/form-data">
    <input type="file" accept=".xlsx" id="file-upload" name="file"/>
    <input id="form_submit"  value="Upload" type="submit"                           name="form_submit"/>
    </form>

Jquery:

 $('#form_submit').on('click', function() {
    var file_data = $('#file-upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    $.ajax({
    url: 'file_upload_parser.php', // point to server-side PHP script 
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(data){
    alert(data);
    }
    });
    });

PHP:

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

Answer 1

Используйте jQuery event.preventDefault() Метод.

Не так

$("#form_submit").click(function(event){ 
  // Your upload code here     
  event.preventDefault();
});

Используйте вот так

$("#form_submit").click(function(event){      
  event.preventDefault();
  // Your upload code here
});

Поместите event.preventDefault() в верхнюю часть функциичтобы предотвратить поведение по умолчанию, напишите свой код.

Answer 2

Просто измените тип ввода «отправить» на «кнопку».Поскольку тип ввода 'submit' имеет поведение по умолчанию для отправки формы.Если вы измените тип ввода на «кнопка» и тип кнопки не будет иметь поведения по умолчанию.

<input id="form_submit" value="Upload" type="submit" name="form_submit"/> 

TO

<button id="form_submit"  value="Upload" type="button" name="form_submit">Upload</button>

Если вы хотите сделать это с помощью jquery, тогда просто сделайтенекоторые изменения в функции jquery, и вы можете запретить поведение кнопки отправки по умолчанию, как показано ниже.

$('#form_submit').on('click', function(e) {
    e.preventDefault();
    var file_data = $('#file-upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    $.ajax({
    url: 'file_upload_parser.php', // point to server-side PHP script 
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(data){
    alert(data);
    }
    });
    });

, и вы можете свободно использовать

<input id="form_submit" value="Upload" type="submit" name="form_submit"/>