html5+Ajax上传超大型文件(文件切割技术)_ajax 上传超大文件-CSDN博客

本文链接：https://blog.csdn.net/u011691759/article/details/17768071

在这里上传:文件大小无限制，带进度条，带进度度联系到浏览器的渲染原理，这也是根据老师的步骤来的，没有老师的指导我也做不出来

上传主要是把文件切割成一小块分别进行上传。然后在php中把这些文件合并到一起

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#result{
width:500px;
height:30px;
border:1px solid green;
}
#progress {
width: 0%;
height:100%;
background:green;
}
</style>
<script type="text/javascript">
function createXHR(){
	var xhr;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else if(window.ActiveXObject){
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xhr;
}
var xhr=createXHR();
function uploadFile(fd){
	xhr.open("POST",'sliceFile.php',false);
	xhr.send(fd);
}
var clock=null;
var sendFile=(function (){
	const LENGTH=10*1024*1024;//一次上传多少
	var start=0;//从文件0字节开处切割
	var end =start+LENGTH;//第一次切割
	var sending=false;//标志正在上传
	
	return (function (){
		if(sending==true){
			return;
		}
		var file=document.getElementsByTagName('input')[0].files[0];//得到文件对象
		var totalsize=file.size;//文件 总的大小
		if(start>totalsize){
			clearInterval(clock);
			return;
		}
		var fd=new FormData();
		var blob=file.slice(start,end);
		fd.append('blob',blob);
		uploadFile(fd);
		start=end;
		end=start+LENGTH;
		sending=false;
		var percent=100*end/totalsize;
		if(percent>100){
			percent=100;
		}
		document.getElementById('progress').style.width=percent+'%';
		document.getElementById('progress').innerHTML=parseInt(percent)+'%';
	});
})();
function start(){
	clock=window.setInterval(sendFile,1000);
}
</script>
</head>
<body>
	<h1>文件上传</h1>
	<h2></h2>
	 <div id="result">
            <div id="progress"></div>
      </div>
	<input type="file" name="blob" οnchange="start();"/>
</body>
</html>
php文件代码，注意文件的后缀
<?php
if(!file_exists("./upload/up.wmv")){
    move_uploaded_file($_FILES['blob']['tmp_name'], './upload/up.wmv');
}else{
    file_put_contents("./upload/up.wmv", file_get_contents($_FILES['blob']['tmp_name'],FILE_APPEND));
}
?>