之前工作中没有遇到过上传大文件的需求,因此今天抽时间研究了一下如何分块传输文件。这个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分块上传文件吧。
*/