Skip to main content

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'];?>"/>

Comments

Popular posts from this blog

6 guaranteed steps how to create CRON JOB FUNTION in wordpress

Create Cron Job function in Wordpress plugin Step 1: Register function on plugin activate  register_activation_hook(__FILE__, 'activate_one'); Step 2: add_filter function for interval //Filter for Adding multiple intervals add_filter( 'cron_schedules', 'intervals_schedule' ); // define interval function   function intervals_schedule($schedules) {   $schedules['everyminute'] = array(    'interval' => 60, // Every 1 minutes    'display'  => __( 'Every 1 minutes' )   );   return $schedules;  } Step 3: Activate hook function   //Schedule a first action if it's not already scheduled   function activate_one() {   if (!wp_next_scheduled('wpyog_cron_action')) {    wp_schedule_event( time(), 'everyminute', 'wpyog_cron_action');   }  } Step 4: Cron hook function   //Hook into that action that'll fire after 1 minutes   add_action('wpyog_cron_action', 'execute_

How to Create a jQuery Autocomplete in Wordpress

How to Create a jquery-ui Autocomplete in wordpress. Autocomplete provides suggestions while you type into the text field. In Wordpress we fetch dynamically matched pattern. Include javascript and css files in header. Create action inside functions.php or inside plugin code. add_action('wp_head', 'custom_register_scripts'); function custom_register_scripts(){ wp_register_style( 'techsudhir_jquery_ui_css', plugin_dir_url(__FILE__) . 'css/jquery-ui.css', false,'1.0.0' ); wp_enqueue_style( 'techsudhir_jquery_ui_css' ); wp_register_script('techsudhir_jquery_ui_js',plugin_dir_url(__FILE__) . 'js/jquery-ui.js',array('jquery'),'1.1', false); wp_enqueue_script('techsudhir_jquery_ui_js'); wp_localize_script( 'techsudhir_autocomplete', 'jqueryAutocomplete', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); wp_enqueue_script( 'techsudhir_

Facebook Login

Step 1: Go on Apps & create new Apps Step 2: Enter the app name & choose category Step 3: Enter the site domain Script code <div id="fb-root"></div> <script   src="http://connect.facebook.net/en_US/all.js#appId=<?php echo '603609636351597';?>"> </script> <script>    FB.init({              appId:'<?php echo '603609636351597';?>', cookie:true,              status:true, xfbml:true           });   FB.getLoginStatus(function(response) {   }); Login function call on click function faceLogin(){  FB.login(function(response) {    if (response.authResponse) {  FB.api('/me', function(response) { $('input[id=facebook_login_fb]').val(response['id']); $('#fb_login_form').submit();  });    } else {  console.log('User cancelled login or did