php实现简单的上传进度条 Web上传文件的三种解决方案分享给大家: 这里我要使用的是form法。通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的上传。 表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 在网上找到了两种方式,PHP配合apc实现和利用uploadprogress实现,这次我要使用的是uploadprogress,点击地址可以下载到php相应版本的dll。安装php_uploadprogress.dll扩展,重启apache。 进度条实现原理: 这里用到了一个iframe无刷新上传文件的方法。 上传完成后的样子如图:
上面的HTML代码中要注意下UPLOAD_IDENTIFIER,这个是用来定位查看哪个文件的上传进度的。我这里就写死为一个1,大家可以写成一个php生成的随机数。下面是JS脚本: var proNum=0; var loop=0; var progressResult = ""; var interval; function sendURL() { $.ajax({ type : 'GET', url : "getprogress.php", async : true, cache : false, dataType : 'json', data: "progress_key=" + $('input[name=UPLOAD_IDENTIFIER]').val(), success : function(e) { proNum=parseInt(e); if(e){ $('.barinner').css('width', proNum+"%"); $('#showNum').html(proNum+"%"); setTimeout("getProgress()", 200); }else{ if(interval == 1){ $('.barinner').css('width', "100%"); $('#showNum').html("100%"); } } } }); } function getProgress(){ loop++; sendURL(); } function startProgress(){ interval = 1; $('.barinner').css('width', proNum+"%"); $('#showNum').html(proNum+"%"); setTimeout("getProgress()", 500); } 下面是getprogress.php文件中的内容: