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

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

WBOY

リリース： 2016-05-16 20:34:56

オリジナル

1384 人が閲覧しました

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

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

效果图如下：

实现代码如下：

JavaScript代码如下：

复制代码代码如下:

javascript代码如下：

复制代码代码如下:

',
                    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(
                        '

' +
'

'+file.name + '

'+
'

' + plupload.formatSize(file.size) + '

'+
'

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

' +
'

');

                    $('#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 = '

'+details[1]+'

';
                        input.val(input.val() + details[1] + ":");
                    } else {
                        var photo_html = '

'+details[1]+'

';
                    }
                $('.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('

ok
All photos have been uploaded.

');
                    }
                });
            });

        // ]]>

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

XML/HTML代码如下：

复制代码代码如下:

Name

Size

Status

upload.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 
                                /* 

                                    @@ 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,
Upload Error
There was an error uploading the photo.
';  

                                    }  

                            } else {  

                                echo 'error,
Upload Error
The photo is bigger than the allowed upload size of 10MB.
';  

                            }  

                        } else {  

                            echo 'error,
Upload Error
You are trying to upload a photo with smaller dimensions.
';  

                        }  

                    } else {  

                        echo 'error,
Upload Error
Only photo uploads are allowed.
';  

                    }  

                } else {  

                    echo 'error,
Upload Error
Only photo uploads are allowed.
';  

                }  

        } else {  

            echo 'error,
Upload Error
An upload error occured.
';             

        }  

    /* 

        @@ Return the json response to the script. 

    */  

    $handle->Clean();  

} else {  

    echo 'error,
Upload Error
An upload error occured.
';  

}

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