js无刷新上传大文件
Posted 孤独的DNA
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js无刷新上传大文件相关的知识，希望对你有一定的参考价值。
这个是看了网上一个的,具体链接忘记了,我手动测试了下
注意:不支持移动端,在安卓和ios上面上传直接卡死了(百度一款大文件上传插件可以参考,兼容了移动端)
直接上demo:
前端html和js部分:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>练习ajax带进度条切割上传大文件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
#par{width: 500px;height: 50px;border: 1px solid purple;}
#sub{width: 0;height: 50px;background-color: gray;}
</style>
</head>
<body>
<div id=‘par‘>
<div id=‘sub‘></div>
</div>
<p><input type="file" name=‘file‘ /></p>
<input type="button" value=‘提交‘ onclick=‘fire();‘ />
</body>
<script>
var xhr = new XMLHttpRequest();
var clock = null;
function fire(){
clock = window.setInterval(upfile,1000); //每一秒触发一次upfile函数
}
var upfile = (function(){
const LENGTH = 1 * 1024 * 1024; //定义每一次分割的文件的大小
var start = 0;
var end = start + LENGTH;
var fd = null;
var flag = false; //flag标志当前是否有文件在上传中
var percent = 0;
return (function(){
/*如果有文件在上传则不进行操作,因为上次没传完就开始下次时会导致合并的文件衔接不上*/
if(flag == true){
return;
}
var file = document.getElementsByName(‘file‘)[0].files[0];
if(start > file.size){ //所有分块上传完成跳出函数清除计数器
clearInterval(clock);
alert(‘上传完成了‘);
return;
}
bloba = file.slice(start,end); //每10M分割一次文件
fd = new FormData();
fd.append(‘file‘,bloba);
fd.append(‘filename‘,file.name);
//其他参数
fd.append(‘name‘,‘wanghao‘);
fd.append(‘appkey‘,‘das‘);
up(fd);
/*监听上传过程,定时器触发upfile函数时若是flag为true则不进行操作以免文件上传合并的时候出问题*/
xhr.upload.onprogress = function(ev){
if(ev.loaded < LENGTH){
flag = true;
}
}
percent = 100 * end / file.size;
if(percent > 100){
percent = 100;
}
document.getElementById(‘sub‘).style.width = percent + ‘%‘;
document.getElementById(‘sub‘).innerHTML = parseInt(percent)+ ‘%‘;
start = end;
end = start + LENGTH ;
flag = false; //当前分块上传完成,flag置false
});
})();
function up(fd){
//采用同步上传防止文件写入时顺序出错
xhr.open(‘POST‘,‘./11.php‘,false);
xhr.send(fd);
}
</script>
</html>
后台php部分:
<?php
$save_file_name = ‘./upload/‘.$_POST[‘filename‘]; //保存的文件名
if(file_exists($save_file_name)){ //第一次收到上传的分割文件
//如果文件已存在,即文件至少第二次被分割上传至此
file_put_contents($save_file_name, file_get_contents($_FILES[‘file‘][‘tmp_name‘]) ,FILE_APPEND);//参数FILE_APPEND表示继续追加到文件而不是覆盖
}else{
$ddd = move_uploaded_file($_FILES[‘file‘][‘tmp_name‘], $save_file_name);
// file_put_contents(‘./1.txt‘, ‘NNNNN‘.time().‘____‘.json_encode($ddd)."
",FILE_APPEND);
}
以上是关于js无刷新上传大文件的主要内容，如果未能解决你的问题，请参考以下文章
ajaxFileUpload上传带参数文件及JS验证文件大小