php实现简单的上传进度条

网上传文件的三种解决方案分享给大家：

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

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

在网上找到了两种方式，PHP配合美国动力会议实现和利用上传进度实现，这次我要使用的是上传进度，点击地址可以下载到服务器端编程语言(专业超文本预处理器的缩写)相应版本的dll。安装php_uploadprogress.dll扩展，重启阿帕奇。

进度条实现原理：

这里用到了一个内联框架无刷新上传文件的方法。

上传完成后的样子如图：

body div style=' padd :20 px ' form action=' action。PHP ' enctype=' multipart/form-data '方法=' post ' target=' iframe UPLOAD ' iframe name=' iframe UPLOAD ' width=' 400 ' height=' 400 '框架边框=' 1 '/iframe输入类型=' hidden '名称=' UPLOAD _ IDENTIFIER '值=' 1 '/输入id=“文件1”名称=“文件1”类型=“文件”/输入值='上传type=' submit ' onclick=' startProgress()'//form/div style=' width : 500 px；高度： 20像素边界：1像素实心红色' div style='相对位置：高度： 20像素背景-颜色：紫色；宽度：% 0 class=' barinner '/div/div id=' ShowNum '/div class=' prbar ' div class=' prpos barinner '/div/div/body上面的超文本标记语言代码中要注意下上传标识符，这个是用来定位查看哪个文件的上传进度的。我这里就写死为一个1,大家可以写成一个服务器端编程语言(专业超文本预处理器的缩写)生成的随机数。下面是射流研究…脚本：

var ProNum=0；定义变量循环=0;var progressResult=var区间；函数sendURL() { $ .ajax({ type : 'GET '，url : 'getprogress.php '，async : true，cache : false，dataType : 'json '，data : ' progress _ key=' $ '(' input[name=UPLOAD _ IDENTIFIER]').val()，成功：函数(e){ ProNum=ParSeint(e)；if(e){ $(' .巴林纳')。css('width '，ProNum ' % ')；$('#showNum ').html(ProNum“%”；setTimeout('getProgress()'，200)；}else{ if(interval==1){ $(').巴林纳')。css('width '，' 100% ')；$('#showNum ').html(' 100% ')；} } } });}函数GetProgress(){ loop；发送URl()；}函数startProgreSs(){ interval=1；$('.巴林纳')。css('width '，ProNum ' % ')；$('#showNum ').html(ProNum“%”；setTimeout('getProgress()'，500)；}下面是getprogress.php文件中的内容：

？PHP if(function _ exists('上传进度_ GET _ info '){ $ info=上传进度_ GET _ info($ _ GET[' progress _ key '])；if(！空($ info)){ if($ info[' bytes _ uploaded ']$ info[' bytes _ total '])！空($info['bytes_uploaded'])！空($ info[' bytes _ total ']){ $ ProNum=floor($ info[' bytes _ uploaded ']/$ info[' bytes _ total '])* 100)；} else { $ ProNum=100 } echo $ ProNum } else { echo 0；} }在上传完成后，我展示了两种进度条的CSS，第二种是用最新的CSS3写的。用到了一些CSS3的动画属性。

。prbar { margin:5px宽度宽度：500像素背景-color : # dddd DD；飞越：隐藏；/* 边框效果*/border: 1px实心# bbbbbbbb-moz-border-radius : 15px；边框半径： 15px/* 为进度条增加阴影效果*/-网络套件-盒子-阴影： 0px 2px 4px # 555555-moz-box-shadow : 0px 2px 4px # 555555；盒影： 0px 2px 4px # 555555}/*歌剧没有圆角，因为飞越：隐藏不适用于圆角*/不存在：-o-prefocus .prbar {边框半径：0 px} .prpos {宽度：0%；高度：30 px背景色： # 3399 ff右边框：1px实心# bbbbbbbb/* CSS3进度条渐变*/transit :宽度2s ease-web套件-transit :宽度0s ease-o-transit :宽度0s ease-moz-transit :宽度0s ease-ms-transit :宽度0s ease/* CSS3条纹*/背景-图像：线性-渐变(135度，#3399ff 25%，#99ccff 25%，#99ccff 50%，#3399ff 50%，#3399ff 75%，#99ccff 75%，# 99 ccff 100%)；背景-图像：-moz-线性-渐变(135度，#3399ff 25%，#99ccff 25%，#99ccff 50%，#3399ff 50%，#3399ff 75%，#99ccff 75%，# 99 ccff 100%)；背景-图像：-ms-线性-梯度(135度，#3399ff 25%，#99ccff 25%，#99ccff 50%，#3399ff 50%，#3399ff 75%，#99ccff 75%，# 99 ccff 100%)；背景-图像：-o-线性-渐变(135度，#3399ff 25%，#99ccff 25%，#99ccff 50%，#3399ff 50%，#3399ff 75%，#99ccff 75%，# 99 ccff 100%)；背景图像：-网络套件-渐变（线性、100% 100%、00、色停(.25 、#99ccff ),色停(.25、#3399ff)、色停(.5 、#3399ff ),色停(.5 、#99ccff ),色停(.75 、#99ccff ),色停(.75、#3399ff)、色停(1、# 3399 ff))；背景-图像：-网络套件-线性-渐变(135度，#3399ff 25%，#99ccff 25%，#99ccff 50%，#3399ff 50%，#3399ff 75%，#99ccff 75%，# 99 ccff 100%)；背景尺寸size: 40px 40px/*背景条纹动画*/animate : BGA nim 3s线性2s无限；-moz-animation: bganim 3s线性2s无限；-网络套件-动画： BGA nim 3s线性2s无限；-o-动画： BG动画3s线性2s无限；-ms-animation: bganim 3s线性2s无限；} @关键帧bganim { from { background-position :0 px；}到{背景-位置：40 px} } @-moz-关键帧bganim { from { background-position :0 px；}到{背景-位置：40 px} } @-网络工具包-关键帧bganim {来自{背景-位置：0像素；}到{背景-位置：40 px} } @-o-关键帧bganim {来自{背景-位置：0像素；}到{背景-位置：40 px} } @-ms-关键帧bganim {来自{背景-位置：0像素；}到{背景-位置：40 px} }以上就是本文的全部内容，希望对大家的学习有所帮助。