PHP + JS 最简网页分块上传文件

编辑于 2017-02-11

* 移动设备下, 可左滑手指以查看较宽代码

这个 demo 很简单,大致明白原理就行了。

参考:blog.csdn.net/sinat_16133021/article/details/54100145

配置

Nginx:

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

php.ini:

file_uploads    On
upload_max_filesize 2M

前端页面

HTML:

<input type="file" name="userfile" id="userfile" />
<input type="button" name="button" id="submit" value="上传大文件"/>

JS:

<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

// 对于 PHP 接收数据就按照平时的 $_FILES 接收就好了
$_FILES['name']['tmp_name'];
// TODO:往一个文件追加内容