Wednesday, August 28, 2013

JQuery AJAX File Uploading

in this tutorial we are going to create a simple file uploader through AJAX.

HTML Script: 

First we create a simple HTML script that contains input file tag and a button as a trigger.
<!DOCTYPE html>
<html>




</html>

JS Script:

make sure you already included the JQuery file.

$("#id_of_file_tag").click(function(){
  var formdata = new FormData();
  var file = $("#certi")[0].files[0];
  formdata.append('certi',certi);
  $.ajax({
   url: "http://localhost/ajaxuploader.php",
   type: "POST",
   data: formdata,
   processData: false,
   contentType: false,
  });
 });

the highlighted lines are the key of JQuery ajax uploader.

FormData
FormData accomodates html's form entities. it is used by create new object of FormData class. after you created it you append all of html's form entites.

Files Attribute
files attribute is a attribute to get the html's file tag features on javascript. after you get the file you can post it through AJAX and receive on server side as $_FILE variable.

PHP Script:

here we'll get the uploaded file and process it. we receive the uploaded file, validate it and move it to desire directory using PHP's function.

<?php
 if(isset($_FILES['certi']) && $_FILES['certi']['error'] == 0){

  if(move_uploaded_file($_FILES['certi']['tmp_name'], 'uploads/'.$_FILES['certi']['name'])){
   echo '{"status":"success"}';
   exit;
  }
 }

?>



Enjoy!!