PHP+jQuery+Ajax实现多图片上传 显示上传进度 并生成缩略图代码示例（附代码下载）

分类：PHP_Python| 发布：kuabaobao| 查看：499 | 发表时间：2015/1/6

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

完整实例代码点击此处本站下载。

效果图如下：

PHP+jQuery+Ajax实现多图片上传 显示上传进度 并生成缩略图代码示例

实现代码如下：

JavaScript代码如下：

代码如下:
view source
print?
01<script type="text/javascript"> 
02 $(document).ready(function() { 
03     $("#filelist").niceScroll({ 
04         cursorwidth: "8px", 
05         cursorborderradius: "0px", 
06         cursoropacitymin: 0.1, 
07         cursoropacitymax: 0.3 
08     }); 
09    
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> 

javascript代码如下：

代码如下:
view source
print?
001<script type="text/javascript"> 
002         // <![CDATA[
003   
004             $('#upload_button').click(function() {
005                 $('.side-pane').html('');
006                 $('#upload_button').hide();
007                 $('#pickfiles').hide();
008                 $('#upload_info').show();
009                 $('#upload_info').css("display","inherit");
010                 uploader.start();
011   
012                 $('#filelist').block({
013                     message: '<center><div class="start-message">Upload in Progress</div></center>',
014                     css: {
015                         border: 'none',
016                         backgroundColor: 'none'
017                     },
018                     overlayCSS: {
019                         backgroundColor: '#fff',
020                         opacity: '0',
021                         cursor: 'wait'
022                     }
023                 });
024             });
025   
026             var uploader = new plupload.Uploader({
027                 runtimes : 'flash, html5',
028                 browse_button : 'pickfiles',
029                 container : 'uploader',
030                 max_file_size : '10mb',
031                 url : 'upload.php',
032                 flash_swf_url : 'uploader/uploader.swf',
033                 filters : [
034                     { title : "Image files", extensions : "jpg,jpeg,gif,png" }
035                 ]
036             });
037   
038             uploader.bind('Init', function(up, params) {});
039             uploader.init();
040   
041             uploader.bind('FilesAdded', function(up, files) {
042                 /*
043                     @@ Show / hide various elements  @camnpr.com
044                 */
045                 $('.upload-message').hide();
046                 $('.info-message').hide();
047                 $('#upload_button').show();
048                 $('#filelist_header').show();
049   
050                 $.each(files, function(i, file) {
051                     $('#filelist').append(
052                         '<div id="' + file.id + '" class="filecontainer">' +
053                         '<div class="filename"> '+file.name + '</div>'+
054                         '<div class="filesize">' + plupload.formatSize(file.size) + '</div>'+
055                         '<div class="filestatus" id="status_'+file.id+'">0%</div>'+
056                         '<div class="filedel"><a id="remove_'+file.id+'" href="javascript:;"><img src="img/uploader/delete.gif" /></a></div>' +
057                         '</div>');
058   
059                     $('#remove_'+file.id).click(function(e) {
060                         uploader.removeFile(file)
061                         $('#'+file.id).hide('slow', function() { ('#'+file.id).remove(); });
062                     });
063                 });
064   
065                 up.refresh();
066                 $('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")}, 1500);
067             });
068   
069             uploader.bind('UploadProgress', function(up, file) {
070                 $('#status_' + file.id).html(file.percent + "%");
071                     if(file.percent == 100) {
072                         $('#' + file.id).block({
073                             message: '',
074                             css: {
075                                 border: 'none',
076                                 backgroundColor: 'none'
077                             },
078                             overlayCSS: {
079                                 backgroundColor: '#fff',
080                                 opacity: '0.7',
081                                 cursor: 'wait'
082                             }
083                         });
084                     }
085                 $('#percent').width(uploader.total.percent+"%");
086                 $('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024)+" kb/sec");
087             });
088   
089             uploader.bind('FileUploaded', function(up, file, response) {
090                 var input = $("#uploaded_photos");
091                 var data = response.response;
092                 var details = data.split(',');
093                     if(details[0] == 'success') {
094                         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>';
095                         input.val(input.val() + details[1] + ":");
096                     } else {
097                         var photo_html = '<div class="clearfix">'+details[1]+'</div>';
098                     }
099                 $('.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>
109All photos have been uploaded.</div>');
110                     }
111                 });
112             });
113   
114         // ]]> 
115         </script>

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

XML/HTML代码如下：

代码如下:
view source
print?
01<div id="uploader" class="main-pane"> 
02             <div id="filelist_header" class="clearfix"> 
03                 <div class="filename">Name</div> 
04                 <div class="filesize">Size</div> 
05                 <div class="filestatus">Status</div> 
06                 <div class="filedel"></div> 
07                 <div></div> 
08             </div> 
09    
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页面代码如下：

代码如下:
view source
print?
001<?php 
002 /*
003     @@ Including the functions.php for using the necessary functions.
004 */ 
005 include('functions.php'); 
006    
007 /*
008     @@ This is the file upload class which does all the uploading work.
009 */ 
010 include('class.upload.php'); 
011    
012 if(isset($_FILES["file"])) { 
013     /*
014         @@ Generating unique name for the photo.
015     */ 
016     $time = time(); 
017     $rand_1 = rand(999, 999999); 
018     $rand_2 = rand(999999, 999999999); 
019     $rand_3 = rand(); 
020     $unique_value = $time.'_'.$rand_1.'_'.$rand_2.'_'.$rand_3; 
021    
022     /*
023         @@ Folder creation for each and every day. This ensures performance even with millions of images.
024     */ 
025     $folder = date('zY'); 
026         if(substr($folder, 0) == 0) { 
027             $folder = '367'.date('Y'); 
028         } 
029    
030     /*
031         @@ This folder is for the source image files.
032     */ 
033     $pfolder = '../upload/source/';  
034         if(!is_dir($pfolder)) { 
035             mkdir($pfolder, 0755); 
036         } 
037    
038     /*
039         @@ This folder is for the image files with 120x120 dimensions.
040     */ 
041     $tfolder = '../upload/small/'; 
042         if(!is_dir($tfolder)) { 
043             mkdir($tfolder, 0755); 
044         } 
045    
046     /*
047         @@ Assigning the upload file to the upload class for all the processing.
048     */ 
049     $handle = new Upload($_FILES["file"]); 
050         if($handle->uploaded) { 
051             $extension = $handle->file_src_name_ext; 
052             $mime = $handle->file_src_mime; 
053    
054                 if(($mime == 'image/gif') || ($mime == 'image/jpg') || ($mime == 'image/png') || ($mime == 'image/bmp') || ($mime == 'image/pjpeg') | ($mime == 'image/jpeg')) { 
055                     /*
056                         @@ Check if the uploaded filetype is an image or not.
057                     */ 
058                     if(($extension == 'gif') || ($extension == 'jpg') || ($extension == 'jpeg') || ($extension == 'png') || ($extension == 'bmp') || ($extension == 'pjpeg')) { 
059                         if($handle->image_src_x > 500) { 
060                                 /*
061                                     @@ Check if the filesize is smaller than 10 MB. 10 MB = 10485760 bytes.
062                                 */ 
063                             if($handle->file_src_size < 10485760) { 
064                                 /*
065                                     @@ Getting the actual file name (with and without extension) and sanitizing it for inserting in the database.
066                                 */ 
067                                 $real_name = clean_input($handle->file_src_name); 
068                                 $body_name = clean_input($handle->file_src_name_body); 
069    
070                                 $handle->file_new_name_body = $unique_value.'_'.$body_name; 
071                                 $handle->Process($pfolder); 
072    
073                                 $handle->image_resize = true; 
074                                 $handle->image_ratio_crop = 'T'; 
075                                 $handle->image_y = 120; 
076                                 $handle->image_x = 120; 
077                                 $handle->file_new_name_body = $unique_value.'_'.$body_name; 
078                                 $handle->Process($tfolder); 
079    
080                                     if($handle->processed) { 
081                                         $actual_name = $handle->file_dst_name; 
082                                         $size = ceil($handle->file_src_size / 1024); 
083    
084                                         ## Sending photo details back to the uploader. 
085                                         $date = date("c", $time); 
086    
087                                             ## Reducing the length of real name if it exceeds 50 characters. 
088                                             if(strlen($real_name) > 50) { 
089                                                 $real_name = substr($real_name, 0, 50).'..'; 
090                                             } 
091                                             echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name; 
092                                     } else { 
093                                         echo 'error,<div class="alert alert-error"><strong>Upload Error</strong>
094There was an error uploading the photo.</div>'; 
095                                     } 
096                             } else { 
097                                 echo 'error,<div class="alert alert-error"><strong>Upload Error</strong>
098The photo is bigger than the allowed upload size of <strong>10MB</strong>.</div>'; 
099                             } 
100                         } else { 
101                             echo 'error,<div class="alert alert-error"><strong>Upload Error</strong>
102You are trying to upload a photo with smaller dimensions.</div>'; 
103                         } 
104                     } else { 
105                         echo 'error,<div class="alert alert-error"><strong>Upload Error</strong>
106Only photo uploads are allowed.</div>'; 
107                     } 
108                 } else { 
109                     echo 'error,<div class="alert alert-error"><strong>Upload Error</strong>
110Only photo uploads are allowed.</div>'; 
111                 } 
112         } else { 
113             echo 'error,<div class="alert alert-error"><strong>Upload Error</strong>
114An upload error occured.</div>';            
115         } 
116     /*
117         @@ Return the json response to the script.  @郑州网建
118     */ 
119     $handle->Clean(); 
120 } else { 
121     echo 'error,<div class="alert alert-error"><strong>Upload Error</strong>
122An upload error occured.</div>'; 
123 }

希望本文所述对大家的PHP+jQuery程序设计有所帮助。

365据说看到好文章不转的人，服务器容易宕机！
标签：
原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/php-python/1878.html

相关文章

关注本站

[+] 关注微博 留言板 WAP访问本站 订阅本站

一条新消息

上能胯底弯直男，下能腰上御腐女。前可一口开蓬门，后能单手扫门庭 。
上能巨乳诱蜀黍，下可长腿戏正太。正看傲娇胜基友，侧则凹凸赛女优。
文能提笔控萝莉，武能床上安人妻；进可欺身压正太，退可提臀迎众基！ [?]
    冬天来了，该换包包了，猛烈点击！！！
     平还是不平？
    流浪猫咪的女包店

小编推荐

    东东找到花花了
  • 最新评论
  • 最近访客

    热门文章

    想你所想 爱你所爱

    豫ICP备10013645号 Copyright 2009-2022 camnpr.com  
    关于我们 - 广告合作 - 免责声明 - 投诉建议