CODEWITHSUNDEEP
phpjqueryhtmlajax
Jahanzeb Awan
Jahanzeb Awan

Reputation: 182

Why page is reloading while uploading file using ajax?

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

Upvotes: 0

Views: 1346

Answers (2)

Amit Rajput
Amit Rajput

Reputation: 2059

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.

Upvotes: 3

VinothRaja
VinothRaja

Reputation: 1413

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

Upvotes: 4

Related Questions