首页>>表单>>jquery php ajax多图片上传.上传进度,生成缩略图(2019-04-29)

jquery php ajax多图片上传.上传进度,生成缩略图

本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件

注意本例在高版本chrome无法运行，建议用firefox测试

 

jquery php ajax多图片上传.上传进度,生成缩略图
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

JavaScript Code
  1. <script type="text/javascript">  
  2. $(document).ready(function() {  
  3.     $("#filelist").niceScroll({  
  4.         cursorwidth: "8px",  
  5.         cursorborderradius: "0px",  
  6.         cursoropacitymin: 0.1,  
  7.         cursoropacitymax: 0.3  
  8.     });  
  9.   
  10.     $(".side-pane").niceScroll({  
  11.         cursorwidth: "8px",  
  12.         cursorborderradius: "0px",  
  13.         cursoropacitymin: 0.1,  
  14.         cursoropacitymax: 0.3  
  15.     });  
  16.   
  17.     $(".time").timeago();  
  18. });  
  19. </script>  

 

XML/HTML Code
  1. <script type="text/javascript">  
  2.         // <![CDATA[ 
  3.  
  4.             $('#upload_button').click(function() { 
  5.                 $('.side-pane').html(''); 
  6.                 $('#upload_button').hide(); 
  7.                 $('#pickfiles').hide(); 
  8.                 $('#upload_info').show(); 
  9.                 $('#upload_info').css("display","inherit"); 
  10.                 uploader.start(); 
  11.  
  12.                 $('#filelist').block({ 
  13.                     message: '<center><div class="start-message">Upload in Progress</div></center>', 
  14.                     css: { 
  15.                         border: 'none', 
  16.                         backgroundColor: 'none' 
  17.                     }, 
  18.                     overlayCSS: { 
  19.                         backgroundColor: '#fff', 
  20.                         opacity: '0', 
  21.                         cursor: 'wait' 
  22.                     } 
  23.                 }); 
  24.             }); 
  25.  
  26.             var uploader = new plupload.Uploader({ 
  27.                 runtimes : 'flash, html5', 
  28.                 browse_button : 'pickfiles', 
  29.                 container : 'uploader', 
  30.                 max_file_size : '10mb', 
  31.                 url : 'upload.php', 
  32.                 flash_swf_url : 'uploader/uploader.swf', 
  33.                 filters : [ 
  34.                     { title : "Image files", extensions : "jpg,jpeg,gif,png" } 
  35.                 ] 
  36.             }); 
  37.  
  38.             uploader.bind('Init', function(up, params) {}); 
  39.             uploader.init(); 
  40.  
  41.             uploader.bind('FilesAdded', function(up, files) { 
  42.                 /* 
  43.                     @@ Show / hide various elements 
  44.                 */ 
  45.                 $('.upload-message').hide(); 
  46.                 $('.info-message').hide(); 
  47.                 $('#upload_button').show(); 
  48.                 $('#filelist_header').show(); 
  49.  
  50.                 $.each(files, function(i, file) { 
  51.                     $('#filelist').append( 
  52.                         '<div id="' + file.id + '" class="filecontainer">' + 
  53.                         '<div class="filename"> '+file.name + '</div>'+ 
  54.                         '<div class="filesize">' + plupload.formatSize(file.size) + '</div>'+ 
  55.                         '<div class="filestatus" id="status_'+file.id+'">0%</div>'+ 
  56.                         '<div class="filedel"><a id="remove_'+file.id+'" href="javascript:;"><img src="img/uploader/delete.gif" /></a></div>' + 
  57.                         '</div>'); 
  58.  
  59.                     $('#remove_'+file.id).click(function(e) { 
  60.                         uploader.removeFile(file) 
  61.                         $('#'+file.id).hide('slow', function() { ('#'+file.id).remove(); }); 
  62.                     }); 
  63.                 }); 
  64.  
  65.                 up.refresh(); 
  66.                 $('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")}, 1500); 
  67.             }); 
  68.  
  69.             uploader.bind('UploadProgress', function(up, file) { 
  70.                 $('#status_' + file.id).html(file.percent + "%"); 
  71.                     if(file.percent == 100) { 
  72.                         $('#' + file.id).block({ 
  73.                             message: '', 
  74.                             css: { 
  75.                                 border: 'none', 
  76.                                 backgroundColor: 'none' 
  77.                             }, 
  78.                             overlayCSS: { 
  79.                                 backgroundColor: '#fff', 
  80.                                 opacity: '0.7', 
  81.                                 cursor: 'wait' 
  82.                             } 
  83.                         }); 
  84.                     } 
  85.                 $('#percent').width(uploader.total.percent+"%"); 
  86.                 $('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024)+" kb/sec"); 
  87.             }); 
  88.  
  89.             uploader.bind('FileUploaded', function(up, file, response) { 
  90.                 var input = $("#uploaded_photos"); 
  91.                 var data = response.response; 
  92.                 var details = data.split(','); 
  93.                     if(details[0] == 'success') { 
  94.                         var photo_html = '<div class="padding-10 hm-photo clearfix"><a href="../upload/source/'+details[4]+'" target="_blank"><img src="../upload/small/'+details[4]+'"></a><p class="small-text light-text">'+details[1]+'</p><abbr class="time small-text" title="'+details[2]+'"></abbr></div>'; 
  95.                         input.val(input.val() + details[1] + ":"); 
  96.                     } else { 
  97.                         var photo_html = '<div class="clearfix">'+details[1]+'</div>'; 
  98.                     } 
  99.                 $('.side-pane').prepend(photo_html); 
  100.                 $('.time').timeago(); 
  101.             }); 
  102.  
  103.             uploader.bind('UploadComplete', function(up, files) { 
  104.                 $('#upload_info').hide(); 
  105.                 $('#filelist').unblock({ 
  106.                     onUnblock: function () { 
  107.                         $('#filelist_header').hide(); 
  108.                         $('#filelist').html('<div style="margin-top: 180px; text-align: center;"><strong>ok</strong><br/>All photos have been uploaded.</div>'); 
  109.                     } 
  110.                 }); 
  111.             }); 
  112.  
  113.         // ]]>  
  114.         </script>  

上面2个js都放在index.php里面

 

XML/HTML Code
  1. <div id="uploader" class="main-pane">  
  2.             <div id="filelist_header" class="clearfix">  
  3.                 <div class="filename">Name</div>  
  4.                 <div class="filesize">Size</div>  
  5.                 <div class="filestatus">Status</div>  
  6.                 <div class="filedel"></div>  
  7.                 <div></div>  
  8.             </div>  
  9.   
  10.             <div id="filelist"></div>  
  11.   
  12.             <div class="action-btns">  
  13.                 <a id="pickfiles" class="login-button btn">Select files to upload</a>  
  14.                 <a href="javascript:;" id="upload_button" class="login-button upload hide">Upload</a>  
  15.             </div>  
  16.   
  17.             <center>  
  18.                 <div id="upload_info">  
  19.                     <div id="upload_info_inner">  
  20.                         <div class="progressbg">  
  21.                             <div id="percent" class="progress"></div>  
  22.                         </div>  
  23.                     </div>  
  24.   
  25.                     <div id="unknown">  
  26.                         <div id="time2go"></div>  
  27.                         <div id="upRate"></div>  
  28.                     </div>  
  29.                 </div>  
  30.             </center>  
  31.   
  32.             <form method="POST" action="process.php" id="processupload">  
  33.                 <input type="hidden" name="uploaded_photos" id="uploaded_photos" />  
  34.                 <input type="hidden" name="fkey" value="<?php echo $fkey; ?>" />  
  35.             </form>  
  36.         </div>  

 upload.php

PHP Code
  1. <?php  
  2. /* 
  3.     @@ Including the functions.php for using the necessary functions. 
  4. */  
  5. include('functions.php');  
  6.   
  7. /* 
  8.     @@ This is the file upload class which does all the uploading work. 
  9. */  
  10. include('class.upload.php');  
  11.   
  12. if(isset($_FILES["file"])) {  
  13.     /* 
  14.         @@ Generating unique name for the photo. 
  15.     */  
  16.     $time = time();  
  17.     $rand_1 = rand(999, 999999);  
  18.     $rand_2 = rand(999999, 999999999);  
  19.     $rand_3 = rand();  
  20.     $unique_value = $time.'_'.$rand_1.'_'.$rand_2.'_'.$rand_3;  
  21.   
  22.     /* 
  23.         @@ Folder creation for each and every day. This ensures performance even with millions of images. 
  24.     */  
  25.     $folder = date('zY');  
  26.         if(substr($folder, 0) == 0) {  
  27.             $folder = '367'.date('Y');  
  28.         }  
  29.   
  30.     /* 
  31.         @@ This folder is for the source image files. 
  32.     */  
  33.     $pfolder = '../upload/source/';   
  34.         if(!is_dir($pfolder)) {  
  35.             mkdir($pfolder, 0755);  
  36.         }  
  37.   
  38.     /* 
  39.         @@ This folder is for the image files with 120x120 dimensions. 
  40.     */  
  41.     $tfolder = '../upload/small/';  
  42.         if(!is_dir($tfolder)) {  
  43.             mkdir($tfolder, 0755);  
  44.         }  
  45.   
  46.     /* 
  47.         @@ Assigning the upload file to the upload class for all the processing. 
  48.     */  
  49.     $handle = new Upload($_FILES["file"]);  
  50.         if($handle->uploaded) {  
  51.             $extension = $handle->file_src_name_ext;  
  52.             $mime = $handle->file_src_mime;  
  53.   
  54.                 if(($mime == 'image/gif') || ($mime == 'image/jpg') || ($mime == 'image/png') || ($mime == 'image/bmp') || ($mime == 'image/pjpeg') | ($mime == 'image/jpeg')) {  
  55.                     /* 
  56.                         @@ Check if the uploaded filetype is an image or not. 
  57.                     */  
  58.                     if(($extension == 'gif') || ($extension == 'jpg') || ($extension == 'jpeg') || ($extension == 'png') || ($extension == 'bmp') || ($extension == 'pjpeg')) {  
  59.                         if($handle->image_src_x > 500) {  
  60.                                 /* 
  61.                                     @@ Check if the filesize is smaller than 10 MB. 10 MB = 10485760 bytes. 
  62.                                 */  
  63.                             if($handle->file_src_size < 10485760) {  
  64.                                 /* 
  65.                                     @@ Getting the actual file name (with and without extension) and sanitizing it for inserting in the database. 
  66.                                 */  
  67.                                 $real_name = clean_input($handle->file_src_name);  
  68.                                 $body_name = clean_input($handle->file_src_name_body);  
  69.   
  70.                                 $handle->file_new_name_body = $unique_value.'_'.$body_name;  
  71.                                 $handle->Process($pfolder);  
  72.   
  73.                                 $handle->image_resize = true;  
  74.                                 $handle->image_ratio_crop = 'T';  
  75.                                 $handle->image_y = 120;  
  76.                                 $handle->image_x = 120;  
  77.                                 $handle->file_new_name_body = $unique_value.'_'.$body_name;  
  78.                                 $handle->Process($tfolder);  
  79.   
  80.                                     if($handle->processed) {  
  81.                                         $actual_name = $handle->file_dst_name;  
  82.                                         $size = ceil($handle->file_src_size / 1024);  
  83.   
  84.                                         ## Sending photo details back to the uploader.  
  85.                                         $date = date("c", $time);  
  86.   
  87.                                             ## Reducing the length of real name if it exceeds 50 characters.  
  88.                                             if(strlen($real_name) > 50) {  
  89.                                                 $real_name = substr($real_name, 0, 50).'..';  
  90.                                             }  
  91.                                             echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name;  
  92.                                     } else {  
  93.                                         echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>There was an error uploading the photo.</div>';  
  94.                                     }  
  95.                             } else {  
  96.                                 echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>The photo is bigger than the allowed upload size of <strong>10MB</strong>.</div>';  
  97.                             }  
  98.                         } else {  
  99.                             echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>You are trying to upload a photo with smaller dimensions.</div>';  
  100.                         }  
  101.                     } else {  
  102.                         echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';  
  103.                     }  
  104.                 } else {  
  105.                     echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';  
  106.                 }  
  107.         } else {  
  108.             echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';             
  109.         }  
  110.     /* 
  111.         @@ Return the json response to the script. 
  112.     */  
  113.     $handle->Clean();  
  114. } else {  
  115.     echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';  
  116. }  

 


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