AJAX file upload

AJAX file upload example.
Tools used
JQuery - jquery-1.7.1.min.js
ajaxupload.js - You can find that file here. https://github.com/valums/ajax-upload

ajaxupload.html

view plainprint?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
  5. <title>AJAX upload - codesstore.blogspot.com</title>  
  6.   
  7. <script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>  
  8. <script type="text/javascript" src="javascript/ajaxupload.js"></script>  
  9.   
  10. </head>  
  11. <body>  
  12.   
  13. <img name="profile_image"  id="profile_image" alt="picture" src="" width="235" height="250" /> <br />  
  14. <input type="button" value="Upload Image" id="picture" class="picture" />  
  15. <div class="uploading"></div>  
  16. <input type="hidden" name="photo_file" id="photo_file" />  
  17.   
  18.   
  19.   
  20. <script type="text/javascript">  
  21. <!--  
  22. new AjaxUpload('#picture', {  
  23.  action: 'ajaxupload_backend.php',  
  24.  name: 'file',  
  25.  autoSubmit: true,  
  26.  responseType: 'json',  
  27.  onSubmit: function(file, extension) {  
  28.   $('.uploading').html('<img src="images/loading.gif" class="loading" />');  
  29.   $('#picture').attr('disabled', true);  
  30.  },  
  31.  onComplete: function(file, json) {  
  32.   $('#picture').attr('disabled', false);  
  33.     
  34.   $('.error').remove();  
  35.     
  36.   if (json['success']) {  
  37.      
  38.    $('#profile_image').attr('src', json['file']);  
  39.    $('#photo_file').val(json['photo_file']);  
  40.   }  
  41.     
  42.   if (json['error']) {  
  43.    alert(json['error']);  
  44.   }  
  45.     
  46.   $('.loading').remove();   
  47.  }  
  48. });  
  49. //-->  
  50. </script>  
  51.   
  52.   
  53. </body>  
  54. </html>  

ajaxupload_backend.php

Here is the backend file. Added some size and file type validations.Uploaded files will store the UPLOAD_DIR dierectory.
view plainprint?
  1. <?php  
  2.   
  3. define('UPLOAD_DIR', 'C:/wamp/www/ajaxupload/uploads/');  
  4. define('UPLOAD_HTTP', 'http://localhost/ajaxupload/uploads/');  
  5.   
  6.         $json = array();  
  7.          
  8.         if (!emptyempty($_FILES['file']['name'])) {  
  9.              
  10.   
  11.             $filename = basename(preg_replace('/[^a-zA-Z0-9\.\-\s+]/', '', html_entity_decode($_FILES['file']['name'], ENT_QUOTES, 'UTF-8')));  
  12.        
  13.             if($_FILES['file']['size'] > (1000*1024)){  
  14.                   $json['error'] = "File too large. Max file size : 1MB";  
  15.               }  
  16.                    
  17.               list($width, $height, $type, $attr) = getimagesize($_FILES['file']['tmp_name']);  
  18.                
  19.               $dimension_eror='';  
  20.                
  21.               $min_width = 800;  
  22.               $min_height = 600;  
  23.                
  24.             if($width < $min_width ){  
  25.                   $dimension_eror .= 'Image width is too small';  
  26.               }  
  27.               if($height < $min_height ){  
  28.                   $dimension_eror .= 'Image height is too small';  
  29.               }  
  30.               if($width < $min_width && $height < $min_height){  
  31.                   $dimension_eror = 'Image width and height too small';  
  32.               }     
  33.               if($dimension_eror != ''){  
  34.                   $json['error'] = $dimension_eror;  
  35.               }  
  36.                              
  37.             $allowed = array('JPG','JPEG','jpg','jpeg');  
  38.                              
  39.             if (!in_array(substr(strrchr($filename, '.'), 1), $allowed)) {  
  40.                 $json['error'] = 'Allow file type: JPG';  
  41.                }  
  42.                     
  43.             if ($_FILES['file']['error'] != UPLOAD_ERR_OK) {  
  44.                 $json['error'] = $_FILES['file']['error'];  
  45.             }  
  46.              
  47.         } else {  
  48.             $json['error'] = 'Upload Failed';  
  49.         }  
  50.          
  51.          
  52.          
  53.         if (!$json) {  
  54.              
  55.             if (is_uploaded_file($_FILES['file']['tmp_name']) && file_exists($_FILES['file']['tmp_name'])) {  
  56.                 $file =  time().generateRandomString().basename($filename);  
  57.   
  58.                 move_uploaded_file($_FILES['file']['tmp_name'], UPLOAD_DIR . $file);  
  59.                                  
  60.                  
  61.                 $json['file'] =UPLOAD_HTTP. $file;  
  62.                 $json['photo_file'] = $file;  
  63.      
  64.             }  
  65.                          
  66.             $json['success'] = 'Successfuly uploaded';  
  67.         }     
  68.   
  69.         echo json_encode($json);         
  70.      
  71.   
  72.         function generateRandomString($length = 6){  
  73.              
  74.             $string = "";  
  75.             $possibleCharactors = "2346789abcdfghjkmnpqrtvwxyzABCDEFGHJKLMNPQRTUVWYZ";  
  76.             $maxlength = strlen($possibleCharactors);  
  77.      
  78.             if ($length > $maxlength) {  
  79.                 $length = $maxlength;  
  80.             }  
  81.      
  82.             $i = 0;  
  83.             while ($i < $length) {  
  84.      
  85.                 $char = substr($possibleCharactors, mt_rand(0, $maxlength-1), 1);  
  86.      
  87.                 if (!strstr($string, $char)) {  
  88.                     $string .= $char;  
  89.                     $i++;  
  90.                 }  
  91.      
  92.             }  
  93.             return $string;  
  94.         }  
  95.          
  96.   
  97. ?>  
Directory structure in Eclipse
AJAX upload project folder structure
 
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)