Why page is reloading while uploading file using ajax? - php

Question

I am using ajax to upload a file from a form. Everything works fine file is uploading, but when I click on the upload button to upload the file after upload the file page gets reloading. How do I prevent the page reloading after file upload?
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

Just change the input type 'submit' to 'button'. Because the input type 'submit' does have the default behavior to submit the form. If you change the input type to 'button' and type button does not have the default behavior.
<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>
If you want to do this with jquery then just make some changes in jquery function and you can prevent the default behavior of the submit button like below.
$('#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);
}
});
});
and you are free to use
<input id="form_submit" value="Upload" type="submit" name="form_submit"/>

Answer 2

Use jQuery event.preventDefault() Method.
Not like this
$("#form_submit").click(function(event){
// Your upload code here
event.preventDefault();
});
Use like this
$("#form_submit").click(function(event){
event.preventDefault();
// Your upload code here
});
Place event.preventDefault() in the top of the function to prevent the default behavior then write your code.