php进度条php手把手教你做网站二十四jquery ajax上传年夜的附件

上风：可以打破做事器上传大小的限定，可以web存储上传到哪一块了，在浏览器关闭或者刷新的情形下可以断点续传；

劣势：上传速率慢，在我本地电脑测试，200M的文件，改变配置按照正常办法上传大约须要12到15秒，但是利用第2种分片上传，大约须要40多秒，也便是所需韶光是正常上传的3倍，我测试了for循环同时上传几个碎片，电脑直接很卡，点击别的浏览器或者文件夹之类的全部是没有相应，以是放弃了利用循环同时上传多个；

如果上传大的文件实现进度条是很有必要的，否则用户看不到进度会等得不耐烦了。

php进度条php手把手教你做网站二十四jquery ajax上传年夜的附件 Java

小的文件只须要2秒旁边，是否有进度条没有关系。

第一种，在可以改变做事器配置的条件下

图1 带进度条文件上传

1、配置php.ini

post_max_size post数据默认8Mupload_tmp_dir 文件上传临时文件（upload_tmp_dir="E:\temp8.0.11"）upload_max_filesize 上传的大小默认2Mmax_execution_time 程序超时时间默认30秒

如果上传的文件比较大，以上4点都须要修正，特殊是第2点，尽可能配置，否则上传末了会比较慢。

2、iis上传大小限定，可以在web.config直接修正，加入以下代码

<security> <requestFiltering> <requestLimits maxAllowedContentLength="1073741824" /> </requestFiltering> </security>

<requestLimits maxAllowedContentLength="1073741824" /> 这里是限定的大小，默认大小忘却了，我这里设置的是可以上传1G进行的测试。

3、nginx上传大小限定

client_max_body_size 2000m; #upload size 随便写的2000M方便上传1G大小文件测试client_header_timeout 300;fastcgi_connect_timeout 300;fastcgi_send_timeout 300;fastcgi_read_timeout 300;fastcgi_request_buffering off;

我开始想把这些加到location / {}里边，提示缺点client_header_timeout不许可放到里边，以是全部加到外边了，也便是server {}里边；

把稳下第6点，如果不配置，nginx上传文件会存到缓存，然后再一点一点传到upload_tmp_dir的目录下，导致上传所需韶光是iis的2倍。

4、html代码

<tr class=''><td width="90" align="right" rowspan='2'>超大附件</td><td><div class='jdfull '><div class='jdperc'></div></div><div class='jdtis '>0%</div><input type='file' id="down_bfule_tpfile" class='inpMain layui-inpu' name='' size='30'><button type='button' class='layui-btn submitpfile' >上传</button> </td></tr><tr class=''><td> <input type='text' class='inpMain' placeholder='不限大小' style='width:calc(100% - 20px);' value='' name='down_bfule' id="down_bfule" ></td></tr>

5、css代码用来设置进度条

/进度条/.jdfull{width:calc(100%);height:20px;background:#FFF;margin-bottom:10px;border-radius:10px;border:1px solid #DDD;}.jdperc{height:20px;background:#5FB878;width:0px;border-radius:10px;}.jdtis{margin-bottom:10px;}

6、js代码(jquery利用监听progress实现进度条功能)

$(".submitpfile").click(function() {var fileext=['rar','zip','pdf'];var formData = new FormData();formData.append("file", $("#down_bfule_tpfile").get(0).files[0]);if (!$("#down_bfule_tpfile").get(0).files[0]) {alert("请选择要上传的文件！ ");return false};//判断扩展名是否支持上传var patharr = $("#down_bfule_tpfile").get(0).files[0].name.split("."); //上传文件扩展名转小写，ZIP zip 2个是同一个文件var ext = patharr[patharr.length - 1].toLowerCase();if (fileext.indexOf(ext) < 0) {alert('只支持' + fileext.join(','));return false;}$.ajax({url: '处理图片上传的url',data: formData,type: "post",dataType: "json",contentType: false,processData: false,//监听progress 实现上传进度条xhr: function() {var xhr = new XMLHttpRequest();xhr.upload.addEventListener('progress',function(e) {console.log(e);//百分比取整var progressRate = parseInt((e.loaded / e.total) 100);$('.jdfull .jdperc').css('width', progressRate + "%");$('.jdtis').html(progressRate + "%")});return xhr},/进度条结束/success: function(result) {if (result.error == "0000") {console.log(result.msg);//上传完成往后文件地址赋值给文本框，用于表单提交$("#down_bfule").val(result.msg);} else {//缺点信息提示alert(result.msg);return false}//上传框初始化var objFile = document.getElementById("down_bfule_tpfile");objFile.outerHTML = objFile.outerHTML.replace(/(value=\").+\"/i, '$1"')}})})

7、后端php处理程序

foreach($_FILES as $k=>$v){$v['name']//文件名称$v['size']//文件大小$v["tmp_name"]//临时文件名包含了物理路径E:\temp\文件名move_uploaded_file($v["tmp_name"],'文件存放路径（物理路径+文件名）')}

第二种，不能改变做事器的配置利用分片上传

图2 进度条显示多少片

html，css不变，只是改变js，下面是用到的js代码

代码1：点击事宜

$(".submitpfile").click(function() {var fileext=['rar','zip','pdf'];//支持格式 var ranksize=10241024;//分片每次上传的大小 1Mif (!$("#down_bfule_tpfile").get(0).files[0]) {alert("请选择要上传的文件！ ");return false};var patharr = $("#down_bfule_tpfile").get(0).files[0].name.split(".");var ext = patharr[patharr.length - 1].toLowerCase();if (fileext.indexOf(ext) < 0) {alert('只支持' + fileext.join(','));return false}var size = $("#down_bfule_tpfile").get(0).files[0].size;var start=true;//是否从第一个开始上传var localname=$("#down_bfule_tpfile").get(0).files[0].name;/ 利用localStorage 文件名作文变量存储存储大小，还有上传了多少片文件名存放判断大小如果大小也和上传的文件相同判断为同一个文件如果用户把文件名改成了上传过的，不加判断会造成上传文件缺点 window.localStorage.getItem 获取存储的数据 window.localStorage.setItem 设置存储的数据 key value window.localStorage.removeItem 移除存储的数据 JSON.parse 字符串转成json格式/if(JSON.parse(window.localStorage.getItem(localname))){var localsize=JSON.parse(window.localStorage.getItem(localname)).localsize;var ranknum=JSON.parse(window.localStorage.getItem(localname)).ranknum;if(size==localsize){//已经上传过但是没有上传完，中断了start=false;}}if(start==true){//第一片开始上传 uploadtp(1);}else{//存储的下一片开始上传 uploadtp(ranknum+1);}})

代码2：uploadtp方法

php后端处理程序

$filename=input('post.filename');//原始文件名$size=input('post.size');//原始文件大小//创建存放的文件夹foreach($_FILES as $k=>$v){ //$v["tmp_name"]临时文件含路径 $images_dir = '/public/upload/file/'.date("Ymd")."/"; if (!file_exists(ROOT_PATH."".$images_dir)) { mkdir(ROOT_PATH."".$images_dir,0777); } $name = explode(".", $filename); //将上传前的文件以“.”分开取得文件类型支持png jpg gif $imgtype=strtolower($name[count($name)-1]);//类型转成小写 $newname=date("YmdHis".rand(10000,99999)).".".$imgtype;//新的文件名 //file_put_contents 追加把稳有FILE_APPEND,不加的话会覆盖原来的 //file_get_contents读取内容file_put_contents(ROOT_PATH.$images_dir.$filename,file_get_contents($v["tmp_name"]),FILE_APPEND);//判断大小是否已经上传完成 if(filesize(ROOT_PATH.$images_dir.$filename)>=$size){rename(ROOT_PATH.$images_dir.$filename,ROOT_PATH.$images_dir.$newname); exit( json_encode(array('error'=>'0000','msg'=>$images_dir.$newname),JSON_UNESCAPED_UNICODE));}else{exit( json_encode(array('error'=>'0001'),JSON_UNESCAPED_UNICODE));}}

解释：

返回代码0000上传完成，0001未完成连续上传，其他缺点提示；分片上传不能利用move_uploaded_file，而是利用file_put_contents追加file_put_contents追加用法file_put_contents("物理路径+文件名","追加的信息",FILE_APPEND);

nginx上传文件很慢

处理办法：关闭 fastcgi_request_buffering，如果不关闭，上传所需韶光至少是iis的2倍；

详细操作：编辑nginx.conf，

server {

fastcgi_request_buffering off;

}