欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-31 23:19:00
本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 完整实例代码点击此处。 效果图如下: 实现代...

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

完整实例代码点击此处。

效果图如下:

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

实现代码如下:

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程序设计有所帮助。