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


Posted in PHP onOctober 15, 2014

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

PHP 相关文章推荐
sphinx增量索引的一个问题
Jun 14 PHP
初品cakephp 入门基础
Feb 16 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
Jun 21 PHP
PHPStrom中实用的功能和快捷键大全
Sep 23 PHP
Symfony2开发之控制器用法实例分析
Feb 05 PHP
Symfony2框架创建项目与模板设置实例详解
Mar 17 PHP
Thinkphp 中 distinct 的用法解析
Dec 14 PHP
PHP面向对象学习之parent::关键字
Jan 18 PHP
thinkphp3.2实现在线留言提交验证码功能
Jul 19 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
Jul 26 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
Apr 04 PHP
常见的5个PHP编码小陋习以及优化实例讲解
Feb 27 PHP
PHP实现文件下载断点续传详解
Oct 15 #PHP
PHP多进程编程实例
Oct 15 #PHP
PHP实现采集中国天气网未来7天天气
Oct 15 #PHP
跟我学Laravel之视图 &amp; Response
Oct 15 #PHP
跟我学Laravel之请求与输入
Oct 15 #PHP
跟我学Laravel之路由
Oct 15 #PHP
跟我学Laravel之请求(Request)的生命周期
Oct 15 #PHP
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
理解Javascript_10_对象模型
2010/10/16 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
基于javascript实现句子翻牌网页版小游戏
2016/03/23 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
Vue数据驱动模拟实现4
2017/01/12 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
js+html制作简单日历的方法
2017/06/27 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
[51:17]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第二场 10月30日
2020/10/31 DOTA
Python实现网络端口转发和重定向的方法
2016/09/19 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
高中自我评价分享
2013/12/05 职场文书
代理协议书
2014/04/22 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
死亡证明书样本说明
2014/10/18 职场文书
交通安全教育主题班会
2015/08/12 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书