开发者社区> 技术小胖子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

PHP上传实现进度条

简介:
+关注继续查看

Web上传文件的三种解决方案

这里我要使用的是form法。通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的上传。

表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值:

application/x-www-form-urlencoded

这是默认编码方式,它只处理表单域里的value属性值,

采用这种编码方式的表单会将表单域的值处理成URL编码方式。

multipart/form-data

这种编码方式的表单会以二进制流的方式来处理表单数据,

这种编码方式会把文件域指定文件的内容也封装到请求参数里。

text/plain 这种方式主要适用于直接通过表单发送邮件的方式

 

在网上找到了两种方式,PHP配合apc实现和利用uploadprogress实现,这次我要使用的是uploadprogress,点击地址可以下载到php相应版本的dll。安装php_uploadprogress.dll扩展,重启apache。

进度条实现原理:

这里用到了一个iframe无刷新上传文件的方法,可以在这里查看到

上传完成后的样子如图:

 

 1 <body>
 2     <div style="padding:20px">
 3         <form action="action.php" enctype="multipart/form-data" method="post" target="iframeUpload">
 4             <iframe name="iframeUpload" width="400" height="400" frameborder='1'></iframe>
 5             <input type="hidden" name="UPLOAD_IDENTIFIER" value="1" />
 6             <input id="file1" name="file1" type="file"/> 
 7             <input value="上传" type="submit" onclick="startProgress()"/> 
 8         </form>
 9     </div>
10     <div style="width: 500px; height: 20px;border:1px solid red">  
11         <div style="position: relative; height: 20px; background-color: purple; width: 0%;" class="barinner"></div>
12     </div>
13     <div id='showNum'></div>
14     <div class="prbar">
15         <div class="prpos barinner"></div>
16     </div>
17 </body>

上面的HTML代码中要注意下UPLOAD_IDENTIFIER,这个是用来定位查看哪个文件的上传进度的。我这里就写死为一个1,大家可以写成一个php生成的随机数。下面是JS脚本:

 1 var proNum=0;  
 2     var loop=0;  
 3     var progressResult = "";  
 4     var interval;  
 5     function sendURL() {  
 6         $.ajax({  
 7             type : 'GET',  
 8             url : "getprogress.php",  
 9             async : true,  
10             cache : false,  
11             dataType : 'json',
12             data: "progress_key=" + $('input[name=UPLOAD_IDENTIFIER]').val(),
13             success : function(e) {  
14                 proNum=parseInt(e);  
15                 if(e){  
16                     $('.barinner').css('width', proNum+"%");
17                     $('#showNum').html(proNum+"%");
18                     setTimeout("getProgress()", 200);  
19           
20                 }else{  
21                     if(interval == 1){  
22                         $('.barinner').css('width', "100%");
23                         $('#showNum').html("100%");
24                     }  
25                 }
26             }  
27         });  
28     }  
29     function getProgress(){  
30         loop++;  
31         sendURL();  
32     }  
33     function startProgress(){  
34         interval = 1;
35         $('.barinner').css('width', proNum+"%");  
36         $('#showNum').html(proNum+"%");
37        setTimeout("getProgress()", 500);  
38     }

下面是getprogress.php文件中的内容:

 1 <?php    
 2 if (function_exists("uploadprogress_get_info")) {
 3     $info = uploadprogress_get_info($_GET['progress_key']);
 4     if(!empty($info)){
 5         if(($info['bytes_uploaded'] < $info['bytes_total']) && !empty($info['bytes_uploaded']) && !empty($info['bytes_total'])){
 6             $proNum = floor(($info['bytes_uploaded']/$info['bytes_total'])*100);        
 7         }else{
 8             $proNum = 100;
 9         }
10         echo $proNum;
11     }else{
12         echo 0;
13     }
14 }

在上传完成后,我展示了两种进度条的CSS,第二种是用最新的CSS3写的。用到了一些CSS3的动画属性。

 1 .prbar {
 2     margin:5px;
 3     width:500px;
 4     background-color:#dddddd;
 5     overflow:hidden;
 6     
 7     /* 边框效果 */
 8     border: 1px solid #bbbbbb;
 9     -moz-border-radius: 15px;
10     border-radius: 15px;
11             
12     /* 为进度条增加阴影效果 */
13     -webkit-box-shadow: 0px 2px 4px #555555;
14     -moz-box-shadow: 0px 2px 4px #555555;
15     box-shadow: 0px 2px 4px #555555;            
16 }
17 /* No rounded corners for Opera, because the overflow:hidden dont work with rounded corners */
18 doesnotexist:-o-prefocus, .prbar {
19   border-radius:0px;
20 }
21 .prpos {
22     width:0%;
23     height:30px;
24     background-color:#3399ff;
25     border-right:1px solid #bbbbbb;
26     /* CSS3 进度条渐变 */
27     transition: width 2s ease;
28     -webkit-transition: width 0s ease;
29     -o-transition: width 0s ease;
30     -moz-transition: width 0s ease;
31     -ms-transition: width 0s ease;
32     /* CSS3 Stripes */
33     background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
34     background-image: -moz-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
35     background-image: -ms-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
36     background-image: -o-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
37     background-image: -webkit-gradient(linear, 100% 100%, 0 0,color-stop(.25, #99ccff), color-stop(.25, #3399ff),color-stop(.5, #3399ff),color-stop(.5, #99ccff),color-stop(.75, #99ccff),color-stop(.75, #3399ff),color-stop(1, #3399ff));
38     background-image: -webkit-linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
39     background-size: 40px 40px;
40     /* Background stripes animation */
41     animation: bganim 3s linear 2s infinite;
42     -moz-animation: bganim 3s linear 2s infinite;
43     -webkit-animation: bganim 3s linear 2s infinite;
44     -o-animation: bganim 3s linear 2s infinite;
45     -ms-animation: bganim 3s linear 2s infinite;
46 }
47 @keyframes bganim {
48     from {background-position:0px;} to { background-position:40px;}
49 }
50 @-moz-keyframes bganim {
51     from {background-position:0px;} to { background-position:40px;}
52 }
53 @-webkit-keyframes bganim {
54     from {background-position:0px;} to { background-position:40px;}
55 }
56 @-o-keyframes bganim {
57     from {background-position:0px;} to { background-position:40px;}
58 }
59 @-ms-keyframes bganim {
60     from {background-position:0px;} to { background-position:40px;}
61 }

 

附件下载:

process.rar

 

 参考资料:

http://www.cnblogs.com/58top/archive/2013/01/07/pure_css_progress_bar_animated_by_css3.html 分享纯CSS3编写的的精美动画进度条
http://www.9streets.cn/art-php-561.html 利用uploadprogress实现上传进度条
http://wenku.baidu.com/link?url=tHDoUekTcj0VhIFFlz2FfKcyD17VNh2o5bs1tIdDNlBK2ee56Shnj77ywzVJAqWxcN6JlaTVbHOBG9clU-9q0ucg8hdNG3i-FZ63Z1N5PEW Web上传文件的三种解决方案
http://blog.sina.com.cn/s/blog_5ca9fdd80100bh4c.html 文件上传的原理



    本文转自 咖啡机(K.F.J)   博客园博客,原文链接:http://www.cnblogs.com/strick/p/3826350.html,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
php-单张图片、多张图片、视频上传
php-单张图片、多张图片、视频上传
0 0
PHP将上传的文件移动至指定位置
PHP将上传的文件移动至指定位置
0 0
PHP上传实现进度条
Web上传文件的三种解决方案
0 0
php 上传大文件主要涉及配置upload_max_filesize和post_max_size两个选项
php.ini配置文件中的默认文件上传大小为2M, 默认upload_max_filesize = 2M,即文件上传的大小为2M,如果你想上传超过8M的文件,比如20M,你必须设定upload_max_filesize = 20M。
1280 0
nginx 和php设置上传大小及可以提交的内容限制
1. 以下代码加入 /etc/nginx/nginx.conf 文件中的 http{ ... } 块中 client_max_body_size 8M; 2. PHP 设置上传大小 打开 /etc/php5/fpm/php.
662 0
PHP仿微信多图片预览上传功能
PHP仿微信多图片预览下载演示地址:http://www.erdangjiade.com/js/830 生产图片区域,上传按钮#btn可替换自己想要的图片 plupload上传var uploader = new plupload.
919 0
ECS配置mySQL\MariaDB和PHP环境
ECS配置mySQL\MariaDB和PHP环境
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
PHP安全开发_从白帽角度做安全
立即下载
PHP在机器学习上的应用及云深度学习平台的架构设计与实现
立即下载
PHP与APM_技术内幕和最佳实践
立即下载