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

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

    下载地址为www.freejs.net/demo/91/down.zip

    jquery php ajax多图片上传.上传进度,生成缩略图
    演示
    JavaScript Code
    1. <script type="text/javascript">  
    2. $(document).ready(function() {  
    3.     $("#filelist").niceScroll({  
    4.         cursor "8px",  
    5.         cursorborderradius: "0px",  
    6.         cursoropacitymin: 0.1,  
    7.         cursoropacitymax: 0.3  
    8.     });  
    9.   
    10.     $(".side-pane").niceScroll({  
    11.         cursor "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. }  
  • 相关阅读:
    相关术语随笔
    JDK简介和mac下安装和查看版本命令
    英语
    英语学习2
    英语学习-19.1
    为什么java是只有值传递而没有引用传递
    线程
    关于同步异步
    锁
    jdk动态代理实现原理总结
  • 原文地址：https://www.cnblogs.com/ranran/p/jquery_muti_upload.html
Copyright © 2020-2023  润新知