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

前端技术 2023/09/01 PHP

本例用到其他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程序设计有所帮助。

本文地址:https://www.stayed.cn/item/2390

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。