jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码

这篇文章主要介绍了jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码,可实现带有进度条效果的多图上传功能与生成缩略图功能,是web开发中非常实用的技巧,需要的朋友可以参考下

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

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

效果图如下：

实现代码如下：

JavaScript代码如下：

<script type="text/javascript">  
$(document).ready(function() {  
    $("#filelist").niceScroll({  
        cursorwidth: "8px",  
        cursorborderradius: "0px",  
        cursoropacitymin: 0.1,  
        cursoropacitymax: 0.3  
    });  
  
    $(".side-pane").niceScroll({  
        cursorwidth: "8px",  
        cursorborderradius: "0px",  
        cursoropacitymin: 0.1,  
        cursoropacitymax: 0.3  
    });  
  
    $(".time").timeago();  
});  
</script>

javascript代码如下：

<script type="text/javascript">  
        // <![CDATA[ 
 
            $('#upload_button').click(function() { 
                $('.side-pane').html(''); 
                $('#upload_button').hide(); 
                $('#pickfiles').hide(); 
                $('#upload_info').show(); 
                $('#upload_info').css("display","inherit"); 
                uploader.start(); 
 
                $('#filelist').block({ 
                    message: '<center><div class="start-message">Upload in Progress</div></center>', 
                    css: { 
                        border: 'none', 
                        backgroundColor: 'none' 
                    }, 
                    overlayCSS: { 
                        backgroundColor: '#fff', 
                        opacity: '0', 
                        cursor: 'wait' 
                    } 
                }); 
            }); 
 
            var uploader = new plupload.Uploader({ 
                runtimes : 'flash, html5', 
                browse_button : 'pickfiles', 
                container : 'uploader', 
                max_file_size : '10mb', 
                url : 'upload.php', 
                flash_swf_url : 'uploader/uploader.swf', 
                filters : [ 
                    { title : "Image files", extensions : "jpg,jpeg,gif,png" } 
                ] 
            }); 
 
            uploader.bind('Init', function(up, params) {}); 
            uploader.init(); 
 
            uploader.bind('FilesAdded', function(up, files) { 
                /* 
                    @@ Show / hide various elements 
                */ 
                $('.upload-message').hide(); 
                $('.info-message').hide(); 
                $('#upload_button').show(); 
                $('#filelist_header').show(); 
 
                $.each(files, function(i, file) { 
                    $('#filelist').append( 
                        '<div id="' + file.id + '" class="filecontainer">' + 
                        '<div class="filename"> '+file.name + '</div>'+ 
                        '<div class="filesize">' + plupload.formatSize(file.size) + '</div>'+ 
                        '<div class="filestatus" id="status_'+file.id+'">0%</div>'+ 
                        '<div class="filedel"><a id="remove_'+file.id+'" href="javascript:;"><img src="img/uploader/delete.gif" /></a></div>' + 
                        '</div>'); 
 
                    $('#remove_'+file.id).click(function(e) { 
                        uploader.removeFile(file) 
                        $('#'+file.id).hide('slow', function() { ('#'+file.id).remove(); }); 
                    }); 
                }); 
 
                up.refresh(); 
                $('#filelist').animate({scrollTop: $('#filelist').attr("scrollHeight")}, 1500); 
            }); 
 
            uploader.bind('UploadProgress', function(up, file) { 
                $('#status_' + file.id).html(file.percent + "%"); 
                    if(file.percent == 100) { 
                        $('#' + file.id).block({ 
                            message: '', 
                            css: { 
                                border: 'none', 
                                backgroundColor: 'none' 
                            }, 
                            overlayCSS: { 
                                backgroundColor: '#fff', 
                                opacity: '0.7', 
                                cursor: 'wait' 
                            } 
                        }); 
                    } 
                $('#percent').width(uploader.total.percent+"%"); 
                $('#upRate').text(Math.ceil(uploader.total.bytesPerSec/1024)+" kb/sec"); 
            }); 
 
            uploader.bind('FileUploaded', function(up, file, response) { 
                var input = $("#uploaded_photos"); 
                var data = response.response; 
                var details = data.split(','); 
                    if(details[0] == 'success') { 
                        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>'; 
                        input.val(input.val() + details[1] + ":"); 
                    } else { 
                        var photo_html = '<div class="clearfix">'+details[1]+'</div>'; 
                    } 
                $('.side-pane').prepend(photo_html); 
                $('.time').timeago(); 
            }); 
 
            uploader.bind('UploadComplete', function(up, files) { 
                $('#upload_info').hide(); 
                $('#filelist').unblock({ 
                    onUnblock: function () { 
                        $('#filelist_header').hide(); 
                        $('#filelist').html('<div style="margin-top: 180px; text-align: center;"><strong>ok</strong><br/>All photos have been uploaded.</div>'); 
                    } 
                }); 
            }); 
 
        // ]]>  
        </script>

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

XML/HTML代码如下：

<div id="uploader" class="main-pane">  
            <div id="filelist_header" class="clearfix">  
                <div class="filename">Name</div>  
                <div class="filesize">Size</div>  
                <div class="filestatus">Status</div>  
                <div class="filedel"></div>  
                <div></div>  
            </div>  
  
            <div id="filelist"></div>  
  
            <div class="action-btns">  
                <a id="pickfiles" class="login-button btn">Select files to upload</a>  
                <a href="javascript:;" id="upload_button" class="login-button upload hide">Upload</a>  
            </div>  
  
            <center>  
                <div id="upload_info">  
                    <div id="upload_info_inner">  
                        <div class="progressbg">  
                            <div id="percent" class="progress"></div>  
                        </div>  
                    </div>  
  
                    <div id="unknown">  
                        <div id="time2go"></div>  
                        <div id="upRate"></div>  
                    </div>  
                </div>  
            </center>  
  
            <form method="POST" action="process.php" id="processupload">  
                <input type="hidden" name="uploaded_photos" id="uploaded_photos" />  
                <input type="hidden" name="fkey" value="<?php echo $fkey; ?>" />  
            </form>  
        </div>

upload.php页面代码如下：

<?php  
/* 
    @@ Including the functions.php for using the necessary functions. 
*/  
include('functions.php');  
  
/* 
    @@ This is the file upload class which does all the uploading work. 
*/  
include('class.upload.php');  
  
if(isset($_FILES["file"])) {  
    /* 
        @@ Generating unique name for the photo. 
    */  
    $time = time();  
    $rand_1 = rand(999, 999999);  
    $rand_2 = rand(999999, 999999999);  
    $rand_3 = rand();  
    $unique_value = $time.'_'.$rand_1.'_'.$rand_2.'_'.$rand_3;  
  
    /* 
        @@ Folder creation for each and every day. This ensures performance even with millions of images. 
    */  
    $folder = date('zY');  
        if(substr($folder, 0) == 0) {  
            $folder = '367'.date('Y');  
        }  
  
    /* 
        @@ This folder is for the source image files. 
    */  
    $pfolder = '../upload/source/';   
        if(!is_dir($pfolder)) {  
            mkdir($pfolder, 0755);  
        }  
  
    /* 
        @@ This folder is for the image files with 120x120 dimensions. 
    */  
    $tfolder = '../upload/small/';  
        if(!is_dir($tfolder)) {  
            mkdir($tfolder, 0755);  
        }  
  
    /* 
        @@ Assigning the upload file to the upload class for all the processing. 
    */  
    $handle = new Upload($_FILES["file"]);  
        if($handle->uploaded) {  
            $extension = $handle->file_src_name_ext;  
            $mime = $handle->file_src_mime;  
  
                if(($mime == 'image/gif') || ($mime == 'image/jpg') || ($mime == 'image/png') || ($mime == 'image/bmp') || ($mime == 'image/pjpeg') | ($mime == 'image/jpeg')) {  
                    /* 
                        @@ Check if the uploaded filetype is an image or not. 
                    */  
                    if(($extension == 'gif') || ($extension == 'jpg') || ($extension == 'jpeg') || ($extension == 'png') || ($extension == 'bmp') || ($extension == 'pjpeg')) {  
                        if($handle->image_src_x > 500) {  
                                /* 
                                    @@ Check if the filesize is smaller than 10 MB. 10 MB = 10485760 bytes. 
                                */  
                            if($handle->file_src_size < 10485760) {  
                                /* 
                                    @@ Getting the actual file name (with and without extension) and sanitizing it for inserting in the database. 
                                */  
                                $real_name = clean_input($handle->file_src_name);  
                                $body_name = clean_input($handle->file_src_name_body);  
  
                                $handle->file_new_name_body = $unique_value.'_'.$body_name;  
                                $handle->Process($pfolder);  
  
                                $handle->image_resize = true;  
                                $handle->image_ratio_crop = 'T';  
                                $handle->image_y = 120;  
                                $handle->image_x = 120;  
                                $handle->file_new_name_body = $unique_value.'_'.$body_name;  
                                $handle->Process($tfolder);  
  
                                    if($handle->processed) {  
                                        $actual_name = $handle->file_dst_name;  
                                        $size = ceil($handle->file_src_size / 1024);  
  
                                        ## Sending photo details back to the uploader.  
                                        $date = date("c", $time);  
  
                                            ## Reducing the length of real name if it exceeds 50 characters.  
                                            if(strlen($real_name) > 50) {  
                                                $real_name = substr($real_name, 0, 50).'..';  
                                            }  
                                            echo 'success,'.$real_name.','.$date.','.$folder.','.$actual_name;  
                                    } else {  
                                        echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>There was an error uploading the photo.</div>';  
                                    }  
                            } else {  
                                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>';  
                            }  
                        } else {  
                            echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>You are trying to upload a photo with smaller dimensions.</div>';  
                        }  
                    } else {  
                        echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';  
                    }  
                } else {  
                    echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>Only photo uploads are allowed.</div>';  
                }  
        } else {  
            echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';             
        }  
    /* 
        @@ Return the json response to the script. 
    */  
    $handle->Clean();  
} else {  
    echo 'error,<div class="alert alert-error"><strong>Upload Error</strong><br/>An upload error occured.</div>';  
}

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