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 相关文章推荐
Ajax+PHP 边学边练 之二 实例
Nov 24 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
Jun 20 PHP
php 获取SWF动画截图示例代码
Feb 10 PHP
MongoDB在PHP中的常用操作小结
Feb 20 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
Oct 31 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
Jun 23 PHP
PHP时间类完整实例(非常实用)
Dec 25 PHP
php设计模式之委托模式
Feb 13 PHP
golang与PHP输出excel示例
Jul 22 PHP
利用PHP将图片转换成base64编码的实现方法
Sep 13 PHP
php结合md5的加密解密算法实例
Sep 30 PHP
PHP反射实际应用示例
Apr 03 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
php.ini中的php-5.2.0配置指令详解
2008/03/27 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
php截取字符串函数分享
2015/02/02 PHP
PHP中常用的魔术方法
2017/04/28 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
nw.js实现类似微信的聊天软件
2015/03/16 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
Layer+Echarts构建弹出层折线图的方法
2019/09/25 Javascript
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
Python序列操作之进阶篇
2016/12/08 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
Champion官网:美国冠军运动服装
2017/01/25 全球购物
德国网上花店:Valentins
2018/08/15 全球购物
非常详细的C#面试题集
2016/07/13 面试题
善意的谎言事例
2014/02/15 职场文书
2014年国庆标语
2014/06/30 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
民主评议党员个人总结
2015/02/13 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技