How to Upload file using jQuery Ajax PHP

How to Upload file using jQuery Ajax PHP

Example 1: Single file upload using jQuery and Ajax

Step 1: Create Html Form

<form id="data" method="post" enctype="multipart/form-data">
    <label>First Name :</label><input type="text" name="firstname" value="" />
    <label>Last Name :</label><input type="text" name="lastname" value="" />
<label>Email :</label><input type="email" name="email" value="" />
<label>Contact Number :</label><input type="text" name="phone" value="" />
    <label>Upload Profile :</label><input name="image" type="file" />
    <input type="submit" value="Submit" />
</form>

Step 2: Now create javascript for file uploading

      <script>
  $("form#data").on('submit',function(){
var formData = new FormData($(this)[0]);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
async: false,
success: function (data) {
$('input[type="submit"]').prop('disabled', true);
},
cache: false,
contentType: false,
processData: false
});
return false;
  });
    </script>
Step 3: Now Create server side script for file upload

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

Example 2: Multiple file upload with ajax header

Step 1: Create Html Form
<form enctype="multipart/form-data">
    <input name="file[]" type="file" multiple="multiple"/>
    <input type="button" value="Upload" />
</form>
<progress></progress>

Step 2: Now create javascript for file uploading
$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'upload.php',  //Server side file to handle the request
        type: 'POST',
        xhr: function() {  // XMLHttpRequest function
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                // For handling the progress of the upload files
myXhr.upload.addEventListener('progress',progressReport, false);
            }
            return myXhr;
        },
        //Ajax events for beforeSend
        beforeSend: function(){},
//Ajax events for success method
        success: function(){},
//Ajax events for error method
        error: function(){},
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});

function progressReport(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }

}

Convert image to base64 encoding
PHP Code:
if(count($_FILES) > 0) {
$data = file_get_contents($_FILES['imagefileupload']['tmp_name']);
$data = base64_encode($data);
//$data = mysql_real_escape_string($data);
$fileName = (isset($data))?$data:'';
}
HTML view:
<img src="data:image/jpg;base64,<?php echo $allGame['Image'];?>"/>