在这里上传:文件大小 无限制,带进度条 ,带进度度联系到浏览器的渲染原理,这也是根据老师的步骤来的,没有老师的指导我也做不出来
上传主要是把文件切割成一小块分别进行上传。然后在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));
}
?>