圖片上傳我們介紹過的教程非常的多了,今天我整理的這篇ajax圖片上傳主要有一個上傳之后自動生成小圖的功能并且還返回預覽效果,下面我們來看看這段代碼.

XML/HTML Code

1. <div id="upload-wrapper">  <div align="center">    <form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">  <input name="ImageFile" id="imageInput" type="file" />  <input type="submit"  id="submit-btn" value="Upload" />  <img src="images/ajax-loader.gif" id="loading-img" style="display:none;" alt="Please Wait"/>  </form>  <div id="output"></div>  </div>   
2. /div> 

JavaScript Code

1. <script type="text/<a href="/js_a/js.html" target="_blank">javascript</a>">   
2. $(document).ready(function() {    
3.     var options = {    
4.             target:   '#output',   // target element(s) to be updated with server response    
5.             beforeSubmit:  beforeSubmit,  // pre-submit callback    
6.             success:       afterSuccess,  // post-submit callback    
7.             resetForm: true        // reset the form after successful submit    
8.         };    
9.             
10.      $('#MyUploadForm').submit(function() {    
11.             $(this).ajaxSubmit(options);               
12.             // always return false to prevent standard browser submit and page navigation    
13.             return false;    
14.         });    
15. });    
16.     
17. function afterSuccess()   
18. {   
19.     $('#submit-btn').show(); //hide submit button   
20.     $('#loading-img').hide(); //hide submit button   
21.     
22. }   
23.     
24. //function to check file size before uploading.   
25. function beforeSubmit(){   
26.     //check whether browser fully supports all File API   
27.    if (window.File && window.FileReader && window.FileList && window.Blob)   
28.     {   
29.             
30.         if( !$('#imageInput').val()) //check empty input filed   
31.         {   
32.             $("#output").html("Are you kidding me?");   
33.             return false   
34.         }   
35.             
36.         var fsize = $('#imageInput')[0].files[0].size; //get file size   
37.         var ftype = $('#imageInput')[0].files[0].type; // get file type   
38.             
39.     
40.         //allow only valid image file types    
41.         switch(ftype)   
42.         {   
43.             case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':   
44.                 break;   
45.             default:   
46.                 $("#output").html("<b>"+ftype+"</b> Unsupported file type!");   
47.                 return false   
48.         }   
49.             
50.         //Allowed file size is less than 1 MB (1048576)   
51.         if(fsize>1048576)    
52.         {   
53.             $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br />Please reduce the size of your photo using an image editor.");   
54.             return false   
55.         }   
56.                     
57.         $('#submit-btn').hide(); //hide submit button   
58.         $('#loading-img').show(); //hide submit button   
59.         $("#output").html("");     
60.     }   
61.     else   
62.     {   
63.         //Output error to older unsupported browsers that doesn't support HTML5 File API   
64.         $("#output").html("Please upgrade your browser, because your current browser lacks some new features we need!");   
65.         return false;   
66.     }   
67. }   
68.     
69. //function to format bites bit.ly/19yoIPO   
70. function bytesToSize(bytes) {   
71.    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];  
72.    if (bytes == 0) return '0 Bytes';  
73.    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));  
74.    return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];   
75. }   
76.     
77. </script> 

processupload.php

PHP Code

1. <?php   
2. if(isset($_POST))   
3. {   
4.     ############ Edit settings ##############   
5.     $ThumbSquareSize        = 200; //Thumbnail will be 200x200   
6.     $BigImageMaxSize        = 500; //Image Maximum height or width   
7.     $ThumbPrefix            = "thumb_"; //Normal thumb Prefix   
8.     $DestinationDirectory   = '../upload/'; //specify upload directory ends with / (slash)   
9.     $Quality                = 90; //jpeg quality   
10.     ##########################################   
11.         
12.     //check if this is an ajax <a href="/tags.php/request/" target="_blank">request</a>   
13.     if (!isset($_SERVER['HTTP_X_REQUESTED_WITH'])){   
14.         die();   
15.     }   
16.         
17.     // check $_FILES['ImageFile'] not empty   
18.     if(!isset($_FILES['ImageFile']) || !is_uploaded_file($_FILES['ImageFile']['tmp_name']))   
19.     {   
20.             die('Something wrong with uploaded file, something missing!'); // output error when above checks fail.   
21.     }   
22.         
23.     // Random number will be added after image name   
24.     $RandomNumber   = rand(0, 9999999999);    
25.     
26.     $ImageName      = str_replace(' ','-',strtolower($_FILES['ImageFile']['name'])); //get image name   
27.     $ImageSize      = $_FILES['ImageFile']['size']; // get original image size   
28.     $TempSrc        = $_FILES['ImageFile']['tmp_name']; // Temp name of image file stored in PHP tmp folder   
29.     $ImageType      = $_FILES['ImageFile']['type']; //get file type, returns "image/png", image/jpeg, text/plain etc.   
30.     
31.     //Let's check allowed $ImageType, we use PHP SWITCH statement here   
32.     switch(strtolower($ImageType))   
33.     {   
34.         case 'image/png':  
35.             //Create a new image from file   
36.             $CreatedImage =  imagecreatefrompng($_FILES['ImageFile']['tmp_name']);  
37.             break;  
38.         case 'image/gif':  
39.             $CreatedImage =  imagecreatefromgif($_FILES['ImageFile']['tmp_name']);  
40.             break;            
41.         case 'image/jpeg':  
42.         case 'image/pjpeg':  
43.             $CreatedImage = imagecreatefromjpeg($_FILES['ImageFile']['tmp_name']);  
44.             break;  
45.         default:  
46.             die('Unsupported File!'); //output error and exit  
47.     }  
48.        
49.     //PHP getimagesize() function returns height/width from image file stored in PHP tmp folder.  
50.     //Get first two values from image, width and height.   
51.     //list assign svalues to $CurWidth,$CurHeight  
52.     list($CurWidth,$CurHeight)=getimagesize($TempSrc);  
53.        
54.     //Get file extension from Image name, this will be added after random name  
55.     $ImageExt = <a href="/tags.php/substr/" target="_blank">substr</a>($ImageName, strrpos($ImageName, '.'));  
56.     $ImageExt = str_replace('.','',$ImageExt);  
57.        
58.     //remove extension from filename  
59.     $ImageName      = preg_replace("//.[^./s]{3,4}$/", "", $ImageName);   
60.        
61.     //Construct a new name with random number and extension.  
62.     $NewImageName = $ImageName.'-'.$RandomNumber.'.'.$ImageExt;  
63.        
64.     //set the Destination Image  
65.     $thumb_DestRandImageName    = $DestinationDirectory.$ThumbPrefix.$NewImageName; //Thumbnail name with destination directory  
66.     $DestRandImageName          = $DestinationDirectory.$NewImageName; // Image with destination directory  
67.        
68.     //Resize image to Specified Size by calling resizeImage function.  
69.     if(resizeImage($CurWidth,$CurHeight,$BigImageMaxSize,$DestRandImageName,$CreatedImage,$Quality,$ImageType))  
70.     {  
71.         //Create a square Thumbnail right after, this time we are using cropImage() function  
72.         if(!cropImage($CurWidth,$CurHeight,$ThumbSquareSize,$thumb_DestRandImageName,$CreatedImage,$Quality,$ImageType))  
73.             {  
74.                 echo 'Error Creating thumbnail';  
75.             }  
76.         /*  
77.         We have succesfully resized and created thumbnail image  
78.         We can now output image to user's browser or store information in the database   
79.         */   
80.         echo '<table width="100%" border="0" cellpadding="4" cellspacing="0">';   
81.         echo '<tr>';   
82.         echo '<td align="center"><img src="../upload/'.$ThumbPrefix.$NewImageName.'" alt="Thumbnail"></td>';   
83.         echo '</tr><tr>';   
84.         echo '<td align="center"><img src="../upload/'.$NewImageName.'" alt="Resized Image"></td>';   
85.         echo '</tr>';   
86.         echo '</table>';   
87.     
88.         /*  
89.         // Insert info into database table!  
90.         mysql_query("INSERT INTO myImageTable (ImageName, ThumbName, ImgPath)  
91.         VALUES ($DestRandImageName, $thumb_DestRandImageName, 'uploads/')");  
92.         */   
93.     
94.     }else{   
95.         die('Resize Error'); //output error   
96.     }   
97. }   
98.     
99.     
100. // This function will proportionally resize image    
101. function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType)   
102. {   
103.     //Check Image size is not 0   
104.     if($CurWidth <= 0 || $CurHeight <= 0)    
105.     {   
106.         return false;   
107.     }   
108.         
109.     //Construct a proportional size of new image   
110.     $ImageScale         = min($MaxSize/$CurWidth, $MaxSize/$CurHeight);    
111.     $NewWidth           = ceil($ImageScale*$CurWidth);   
112.     $NewHeight          = ceil($ImageScale*$CurHeight);   
113.     $NewCanves          = imagecreatetruecolor($NewWidth, $NewHeight);   
114.         
115.     // Resize Image   
116.     if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight))   
117.     {   
118.         switch(strtolower($ImageType))   
119.         {   
120.             case 'image/png':   
121.                 imagepng($NewCanves,$DestFolder);   
122.                 break;   
123.             case 'image/gif':   
124.                 imagegif($NewCanves,$DestFolder);   
125.                 break;             
126.             case 'image/jpeg':   
127.             case 'image/pjpeg':   
128.                 imagejpeg($NewCanves,$DestFolder,$Quality);   
129.                 break;   
130.             default:   
131.                 return false;   
132.         }   
133.     //Destroy image, frees memory      
134.     if(is_resource($NewCanves)) {imagedestroy($NewCanves);}    
135.     return true;   
136.     }   
137.     
138. }   
139.     
140. //This function cor<a href="/fw/photo.html" target="_blank">ps</a> image to create exact square images, no matter what its original size!   
141. function cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType)   
142. {       
143.     //Check Image size is not 0   
144.     if($CurWidth <= 0 || $CurHeight <= 0)    
145.     {   
146.         return false;   
147.     }   
148.         
149.     //abeautifulsite.net has excellent article about "Cropping an Image to Make Square bit.ly/1gTwXW9   
150.     if($CurWidth>$CurHeight)   
151.     {   
152.         $y_offset = 0;   
153.         $x_offset = ($CurWidth - $CurHeight) / 2;   
154.         $square_size    = $CurWidth - ($x_offset * 2);   
155.     }else{   
156.         $x_offset = 0;   
157.         $y_offset = ($CurHeight - $CurWidth) / 2;   
158.         $square_size = $CurHeight - ($y_offset * 2);   
159.     }   
160.         
161.     $NewCanves  = imagecreatetruecolor($iSize, $iSize);    
162.     if(imagecopyresampled($NewCanves, $SrcImage,0, 0, $x_offset, $y_offset, $iSize, $iSize, $square_size, $square_size))   
163.     {   
164.         switch(strtolower($ImageType))   
165.         {   
166.             case 'image/png':   
167.                 imagepng($NewCanves,$DestFolder);   
168.                 break;   
169.             case 'image/gif':   
170.                 imagegif($NewCanves,$DestFolder);   
171.                 break;             
172.             case 'image/jpeg':   
173.             case 'image/pjpeg':   
174.                 imagejpeg($NewCanves,$DestFolder,$Quality);   
175.                 break;  //Vevb.com 
176.             default:   
177.                 return false;   
178.         }   
179.     //Destroy image, frees memory      
180.     if(is_resource($NewCanves)) {imagedestroy($NewCanves);}    
181.     return true;   
182.     
183.     }   
184.           
185. } 

以上就是我們要介紹的ajax無刷新圖片上傳功能了,其實就是通過異步模式提交給php然后由php上傳圖片并且生成小圖返回給指定的id的htm元素模塊即可.