网页分块上传文件

2017-01-07 19:01:45来源:CSDN作者:sinat_16133021人点击

之前工作中没有遇到过上传大文件的需求,因此今天抽时间研究了一下如何分块传输文件。这个demo很简单,大致明白原理就行了。

demo的环境:PHP5.5 + nginx
上传的文件为一张照片:2.3M 每次最多上传1M,大概要循环3次

1.nginx配置,为了提高处理性能,我们需要加大nginx的buffer

large_client_header_buffers 4 64K;//cookie等值比较大的时候需要扩大这个缓冲区client_body_buffer_size 2M;//如果这个值小于上传的数据,则nginx会把数据写道临时文件,增加了额外的IOclient_max_body_size 2M;

2.同时检查PHP的配置

file_uploads    Onupload_max_filesize 2M

今天写的部分是html5中有个FormData属性下面直接贴代码:

    <div class="Main">    <div class="header">header</div>    <div>        <input type="file" name="userfile" id="userfile" />        <input type="button" name="button" id="submit" value="上传视屏"/>    </div></div>
<script type="text/javascript">   var sub = document.getElementById("submit");    sub.onclick=function(){      var file= document.getElementById("userfile").files[0];      if (file == undefined) {          alert("请上传文件");          return false;      }      var each_chunck = 1024*1024;      var start = end = 0;      while(end < file.size) {          end = start + each_chunck;          data = file.slice(start, end);          var fd = new FormData();          fd.append('name', data);          var xhr = new XMLHttpRequest();          xhr.open('POST','/upload/updata',false);          xhr.send(fd);          start = end;      }   }</script>   
 //对于PHP接收数据就按照平时的$_FILES接收就好了,如上我们获取临时文件名 $_FILES['name']['tmp_name']; //对于接收的文件,我们试验的时候就是往一个文件追加内容就行了,当多机器环境下就需要使用分布式存储文件存储了。以后研究。
/* *下次就抽时间研究一下分布式文件和iframe分块上传文件吧。 */

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台