首页>>表单>>jquery php多文件上传(2013-09-28)

jquery php多文件上传

多文件上传

jquery php多文件上传
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

index.php

PHP Code
  1. <div id="uploaderform">  
  2. <form action="upload.php" method="post" enctype="multipart/form-data" name="UploadForm" id="UploadForm">  
  3.     <h1>jquery php多文件上传(本例限制为3个文件)</h1>   
  4.     <label>文件  
  5.     <span class="small"><a href="#" id="AddMoreFileBox">添加上传框</a></span>  
  6.     </label>  
  7.     <div id="AddFileInputBox"><input id="fileInputBox" style="margin-bottom: 5px;" type="file"  name="file[]"/></div>  
  8.     <div class="sep_s"></div>  
  9.       
  10.     <label>介绍  
  11.      
  12.     </label>  
  13.     <div><input name="username" type="text" id="username" value="freejs.net" /></div>  
  14.       
  15.      
  16.     <button type="submit" class="button" id="SubmitButton">Upload</button>  
  17.       
  18.     <div id="progressbox"><div id="progressbar"></div ><div id="statustxt">0%</div ></div>  
  19. </form>  
  20. </div>  
  21. <div id="uploadResults">  
  22.     <div align="center" style="margin:20px;"><a href="#" id="ShowForm">打开/隐藏 表单</a></div>  
  23.     <div id="output"></div>  
  24. </div>  

js文件

JavaScript Code
  1. <script type="text/javascript">   
  2. $(document).ready(function() {   
  3. //elements  
  4. var progressbox         = $('#progressbox'); //progress bar wrapper  
  5. var progressbar         = $('#progressbar'); //progress bar element  
  6. var statustxt           = $('#statustxt'); //status text element  
  7. var submitbutton        = $("#SubmitButton"); //submit button  
  8. var myform              = $("#UploadForm"); //upload form  
  9. var output              = $("#output"); //ajax result output element  
  10. var completed           = '0%'; //initial progressbar value  
  11. var FileInputsHolder    = $('#AddFileInputBox'); //Element where additional file inputs are appended  
  12. var MaxFileInputs       = 3; //Maximum number of file input boxs  
  13.   
  14. // adding and removing file input box  
  15. var i = $("#AddFileInputBox div").size() + 1;  
  16. $("#AddMoreFileBox").click(function () {  
  17.         event.returnValue = false;  
  18.         if(i < MaxFileInputs)  
  19.         {  
  20.             $('<span><input type="file" id="fileInputBox" size="20" name="file[]" class="addedInput" value=""/><a href="#" class="removeclass small2"><img src="images/close_icon.gif" border="0" /></a></span>').appendTo(FileInputsHolder);  
  21.             i++;  
  22.         }  
  23.         return false;  
  24. });  
  25.   
  26. $("body").on("click",".removeclass", function(e){  
  27.         event.returnValue = false;  
  28.         if( i > 1 ) {  
  29.                 $(this).parents('span').remove();i--;  
  30.         }  
  31.           
  32. });   
  33.   
  34. $("#ShowForm").click(function () {  
  35.   $("#uploaderform").slideToggle(); //Slide Toggle upload form on click  
  36. });  
  37.       
  38. $(myform).ajaxForm({  
  39.     beforeSend: function() { //brfore sending form  
  40.         submitbutton.attr('disabled', ''); // disable upload button  
  41.         statustxt.empty();  
  42.         progressbox.show(); //show progressbar  
  43.         progressbar.width(completed); //initial value 0% of progressbar  
  44.         statustxt.html(completed); //set status text  
  45.         statustxt.css('color','#000'); //initial color of status text  
  46.           
  47.     },  
  48.     uploadProgress: function(event, position, total, percentComplete) { //on progress  
  49.         progressbar.width(percentComplete + '%') //update progressbar percent complete  
  50.         statustxt.html(percentComplete + '%'); //update status text  
  51.         if(percentComplete>50)  
  52.             {  
  53.                 statustxt.css('color','#fff'); //change status text to white after 50%  
  54.             }else{  
  55.                 statustxt.css('color','#000');  
  56.             }  
  57.               
  58.         },  
  59.     complete: function(response) { // on complete  
  60.         output.html(response.responseText); //update element with received data  
  61.         myform.resetForm();  // reset form  
  62.         submitbutton.removeAttr('disabled'); //enable submit button  
  63.         progressbox.hide(); // hide progressbar  
  64.         $("#uploaderform").slideUp(); // hide form after upload  
  65.     }  
  66. });  
  67.   
  68. });   
  69. </script>   

 uoload.php

 

PHP Code
  1. <noscript>  
  2. <div align="center"><a href="index.php">Go Back To Upload Form</a></div><!-- If javascript is disabled -->  
  3. </noscript>  
  4. <?php  
  5. //If you face any errors, increase values of "post_max_size", "upload_max_filesize" and "memory_limit" as required in php.ini  
  6.   
  7.  //Some Settings  
  8. $ThumbSquareSize        = 200; //Thumbnail will be 200x200  
  9. $BigImageMaxSize        = 500; //Image Maximum height or width  
  10. $ThumbPrefix            = "thumb_"; //Normal thumb Prefix  
  11. $DestinationDirectory   = '../upload/'; //Upload Directory ends with / (slash)  
  12. $Quality                = 90;  
  13.   
  14. //ini_set('memory_limit', '-1'); // maximum memory!  
  15.   
  16. foreach($_FILES as $file)  
  17. {  
  18. // some information about image we need later.  
  19. $ImageName      = $file['name'];  
  20. $ImageSize      = $file['size'];  
  21. $TempSrc        = $file['tmp_name'];  
  22. $ImageType      = $file['type'];  
  23.   
  24.   
  25. if (is_array($ImageName))   
  26. {  
  27.     $c = count($ImageName);  
  28.       
  29.     echo  '<ul>';  
  30.       
  31.     for ($i=0; $i < $c; $i++)  
  32.     {  
  33.         $processImage           = true;   
  34.         $RandomNumber           = rand(0, 9999999999);  // We need same random name for both files.  
  35.           
  36.         if(!isset($ImageName[$i]) || !is_uploaded_file($TempSrc[$i]))  
  37.         {  
  38.             echo '<div class="error">Error occurred while trying to process <strong>'.$ImageName[$i].'</strong>, may be file too big!</div>'; //output error  
  39.         }  
  40.         else  
  41.         {  
  42.             //Validate file + create image from uploaded file.  
  43.             switch(strtolower($ImageType[$i]))  
  44.             {  
  45.                 case 'image/png':  
  46.                     $CreatedImage = imagecreatefrompng($TempSrc[$i]);  
  47.                     break;  
  48.                 case 'image/gif':  
  49.                     $CreatedImage = imagecreatefromgif($TempSrc[$i]);  
  50.                     break;  
  51.                 case 'image/jpeg':  
  52.                 case 'image/pjpeg':  
  53.                     $CreatedImage = imagecreatefromjpeg($TempSrc[$i]);  
  54.                     break;  
  55.                 default:  
  56.                     $processImage = false; //image format is not supported!  
  57.             }  
  58.             //get Image Size  
  59.             list($CurWidth,$CurHeight)=getimagesize($TempSrc[$i]);  
  60.   
  61.             //Get file extension from Image name, this will be re-added after random name  
  62.             $ImageExt = substr($ImageName[$i], strrpos($ImageName[$i], '.'));  
  63.             $ImageExt = str_replace('.','',$ImageExt);  
  64.       
  65.             //Construct a new image name (with random number added) for our new image.  
  66.             $NewImageName = $RandomNumber.'.'.$ImageExt;  
  67.   
  68.             //Set the Destination Image path with Random Name  
  69.             $thumb_DestRandImageName    = $DestinationDirectory.$ThumbPrefix.$NewImageName; //Thumb name  
  70.             $DestRandImageName          = $DestinationDirectory.$NewImageName; //Name for Big Image  
  71.   
  72.             //Resize image to our Specified Size by calling resizeImage function.  
  73.             if($processImage && resizeImage($CurWidth,$CurHeight,$BigImageMaxSize,$DestRandImageName,$CreatedImage,$Quality,$ImageType[$i]))  
  74.             {  
  75.                 //Create a square Thumbnail right after, this time we are using cropImage() function  
  76.                 if(!cropImage($CurWidth,$CurHeight,$ThumbSquareSize,$thumb_DestRandImageName,$CreatedImage,$Quality,$ImageType[$i]))  
  77.                     {  
  78.                         echo 'Error Creating thumbnail';  
  79.                     }  
  80.                     /* 
  81.                     At this point we have succesfully resized and created thumbnail image 
  82.                     We can render image to user's browser or store information in the database 
  83.                     For demo, we are going to output results on browser. 
  84.                     */  
  85.                       
  86.                     //Get New Image Size  
  87.                     list($ResizedWidth,$ResizedHeight)=getimagesize($DestRandImageName);  
  88.                       
  89.                     echo '<table width="100%" border="0" cellpadding="4" cellspacing="0">'; 
  90.                     echo '<tr>'; 
  91.                     echo '<td align="center"><img src="../upload/'.$ThumbPrefix.$NewImageName.'" alt="Thumbnail" height="'.$ThumbSquareSize.'" width="'.$ThumbSquareSize.'"></td>'; 
  92.                     echo '</tr><tr>'; 
  93.                     echo '<td align="center"><img src="../upload/'.$NewImageName.'" alt="Resized Image" height="'.$ResizedHeight.'" width="'.$ResizedWidth.'"></td>'; 
  94.                     echo '</tr>'; 
  95.                     echo '</table>'; 
  96.                     /* 
  97.                     // Insert info into database table! 
  98.                     mysql_query("INSERT INTO myImageTable (ImageName, ThumbName, ImgPath) 
  99.                     VALUES ($DestRandImageName, $thumb_DestRandImageName, '../upload/')"); 
  100.                     */ 
  101.  
  102.             }else{ 
  103.                 echo '<div class="error">Error occurred while trying to process <strong>'.$ImageName[$i].'</strong>! Please check if file is supported</div>'; //output error 
  104.             } 
  105.              
  106.         } 
  107.          
  108.     } 
  109.     echo '</ul>'; 
  110.     } 
  111. } 
  112.      
  113. // This function will proportionally resize image  
  114. function resizeImage($CurWidth,$CurHeight,$MaxSize,$DestFolder,$SrcImage,$Quality,$ImageType) 
  115. { 
  116.     //Check Image size is not 0 
  117.     if($CurWidth <= 0 || $CurHeight <= 0)  
  118.     { 
  119.         return false; 
  120.     } 
  121.      
  122.     //Construct a proportional size of new image 
  123.     $ImageScale         = min($MaxSize/$CurWidth, $MaxSize/$CurHeight);  
  124.     $NewWidth           = ceil($ImageScale*$CurWidth); 
  125.     $NewHeight          = ceil($ImageScale*$CurHeight); 
  126.      
  127.     if($CurWidth < $NewWidth || $CurHeight < $NewHeight) 
  128.     { 
  129.         $NewWidth = $CurWidth; 
  130.         $NewHeight = $CurHeight; 
  131.     } 
  132.     $NewCanves  = imagecreatetruecolor($NewWidth, $NewHeight); 
  133.     // Resize Image 
  134.     if(imagecopyresampled($NewCanves, $SrcImage,0, 0, 0, 0, $NewWidth, $NewHeight, $CurWidth, $CurHeight)) 
  135.     { 
  136.         switch(strtolower($ImageType)) 
  137.         { 
  138.             case 'image/png': 
  139.                 imagepng($NewCanves,$DestFolder); 
  140.                 break; 
  141.             case 'image/gif': 
  142.                 imagegif($NewCanves,$DestFolder); 
  143.                 break;           
  144.             case 'image/jpeg': 
  145.             case 'image/pjpeg': 
  146.                 imagejpeg($NewCanves,$DestFolder,$Quality); 
  147.                 break; 
  148.             default: 
  149.                 return false; 
  150.         } 
  151.     if(is_resource($NewCanves)) {  
  152.       imagedestroy($NewCanves);  
  153.     }  
  154.     return true; 
  155.     } 
  156.  
  157. } 
  158.  
  159. //This function corps image to create exact square images, no matter what its original size! 
  160. function cropImage($CurWidth,$CurHeight,$iSize,$DestFolder,$SrcImage,$Quality,$ImageType) 
  161. {     
  162.     //Check Image size is not 0 
  163.     if($CurWidth <= 0 || $CurHeight <= 0)  
  164.     { 
  165.         return false; 
  166.     } 
  167.      
  168.     //abeautifulsite.net has excellent article about "Cropping an Image to Make Square" 
  169.     //http://www.abeautifulsite.net/blog/2009/08/cropping-an-image-to-make-square-thumbnails-in-php/ 
  170.     if($CurWidth>$CurHeight) 
  171.     { 
  172.         $y_offset = 0; 
  173.         $x_offset = ($CurWidth - $CurHeight) / 2; 
  174.         $square_size    = $CurWidth - ($x_offset * 2); 
  175.     }else{ 
  176.         $x_offset = 0; 
  177.         $y_offset = ($CurHeight - $CurWidth) / 2; 
  178.         $square_size = $CurHeight - ($y_offset * 2); 
  179.     } 
  180.      
  181.     $NewCanves  = imagecreatetruecolor($iSize, $iSize);  
  182.     if(imagecopyresampled($NewCanves, $SrcImage,0, 0, $x_offset, $y_offset, $iSize, $iSize, $square_size, $square_size)) 
  183.     { 
  184.         switch(strtolower($ImageType)) 
  185.         { 
  186.             case 'image/png': 
  187.                 imagepng($NewCanves,$DestFolder); 
  188.                 break; 
  189.             case 'image/gif': 
  190.                 imagegif($NewCanves,$DestFolder); 
  191.                 break;           
  192.             case 'image/jpeg': 
  193.             case 'image/pjpeg':  
  194.                 imagejpeg($NewCanves,$DestFolder,$Quality);  
  195.                 break;  
  196.             default:  
  197.                 return false;  
  198.         }  
  199.     if(is_resource($NewCanves)) {   
  200.       imagedestroy($NewCanves);   
  201.     }   
  202.     return true;  
  203.   
  204.     }  
  205.         
  206. }  

 


原文地址:http://www.freejs.net/article_biaodan_45.html