网页分块上传文件

之前工作中没有遇到过上传大文件的需求，因此今天抽时间研究了一下如何分块传输文件。这个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会把数据写道临时文件，增加了额外的IO
client_max_body_size 2M;

2.同时检查PHP的配置

file_uploads    On
upload_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分块上传文件吧。
 */