您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
原生ajax实现大文件切片上传
发布时间：2016-09-04 19:28:42编辑：雪饮阅读（）
php在文件上传这方面对于php.ini中有文件上传的限制，如果你的程序放置于独立服务器中还好说，但若是放置于虚拟主机中则就会受到主机商的限制。
而我们需要上传超大文件时则不免需要改变php.ini中对文件上传的限制。于是使用虚拟主机的用户就出现了问题。
那么如何解决此问题呢？
既然大文件我们无法上传，但是我们可以上传小文件啊。把文件不断的切成小块，然后通过小切片去一个个上传，上传后通过php再将其合并即可。
前端demo：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
/*
用到的API
file-->继承自-->Blob
blob有slice方法，可以截取二进制对象的一部分
思路：
截取10M，上传
判断文件有没有截取完毕
while 还有数据
{
截取，ajax上传
}
*/
function sendfile(){
const LENGTH=10*1024*1024;//以10M为一次分割
var sta=0;//截取开始字节初始化
var end=sta+LENGTH;//截取末尾字节初始化
var blob=null;//存储截取的数据初始化变量
var fd=null;
/*
xhr对象
*/
var xhr=null;
var mov=document.getElementsByName('mov')[0].files[0];
var totalsize=mov.size;
while(sta<totalsize){
blob=mov.slice(sta,end);
fd=new FormData();
fd.append('part',blob);//formdata对象新增，相当于在一个表单中新增一个表单元素（此处为file类型，并且该类型表单元素中已经选择了文件，此处part就是input的name值）
xhr=new XMLHttpRequest();
xhr.open('POST','Untitled-2.php',false);
xhr.upload.onprogress=function (ev) {
/*
本函数可以获取切片上传方式下文件上传的进度条，而该函数只有在ajax为异步情况下方能生效，ajax为同步的情况下是无法生效的，没有机会执行的。
若启动了异步又会因为while的速度快于上传切片速度导致后端php处理切片混乱，如多个切片发送到php端，php对切片进行追加合并时就会出现混乱，切片合并的前后顺序有可能就会打乱。
这样以来就会导致最终合并出来的数据出现异常，所以切片上传的进度条功能在这里暂时不做讨论。但或许可以通过ajax的请求完成状态来做处理。
*/
/*
var perent=parseInt(end/totalsize)*100;
document.getElementById("bar").style.width=perent+'%';
document.getElementById("bar").innerHTML=parseInt(perent)+'%';
*/
}
xhr.send(fd);
sta=end;
end=sta+LENGTH;
}
document.getElementById("bar").innerHTML="文件以切片上传方式上传完成。";
}
</script>
<style type="text/css">
#progress{
width:500px;
height:30px;
border:1px solid green;
}
#bar{
width:100%;
height:100%;
text-align:center;
}
</style>
</head>
<body>
<h1>html5大文件切割上传</h1>
<div id="progress">
<div id="bar"></div>
</div>
<input type="file" name="mov" onChange="sendfile();" />
</body>
</html>
关键字词：ajax,切片上传
上一篇：两款原生js按钮控轮播
下一篇：ajax实现切片上传进度条