Why page is reloading while uploading file using ajax?

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";
    }

Sukhjinder Singh · Accepted Answer · 2018-12-28 05:51:26Z

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"/>

Martin Zikmund · Accepted Answer · 2018-12-28 07:40:00Z

3

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.

edited Dec 28, 2018 at 7:40

Martin Zikmund

39.2k7 gold badges74 silver badges95 bronze badges

answered Dec 28, 2018 at 5:32

Amit Rajput

2,0591 gold badge13 silver badges27 bronze badges

Collectives™ on Stack Overflow

Why page is reloading while uploading file using ajax?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related