这个是看了网上一个的,具体链接忘记了,我手动测试了下
注意:不支持移动端,在安卓和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)."\r\n",FILE_APPEND);}
js无刷新上传大文件
原文地址：https://www.cnblogs.com/wanghjun/p/9121634.html