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>分割大文件上傳</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#test
{
width
: 200px;
height
: 100px;
border
: 1px solid green;
display
: none;
}
#img
{
width
: 50px;
height
: 50px;
display
: none;
}
#upimg
{
text-align
: center;
font
: 8px/10px '微軟雅黑','黑體',sans-serif;
width
: 300px;
height
: 10px;
border
: 1px solid green;
}
#load
{
width
: 0%;
height
: 100%;
background
: green;
text-align
: center;
}
</style>
</head>
<body>
<form enctype="multipart/form-data" action="file.php" method="post">
<!--
<input type="file" name="pic" />
<div id="img"></div>
<input type="button" value="uploadimg" onclick="upimg();" /><br />
-->
<div id="upimg">
<div id="load"></div>
</div>
<input type="file" name="mof" multiple="multiple"/>
<input type="button" value="uploadfile" onclick="upfile();" />
<input type="submit" value="submit" />
</form>
<div id="test">
測試是否DIV消失
</div>
<script type="text/javascript">
var dom=document.getElementsByTagName('form')[0];
dom.onsubmit
=function(){
//return false;
}
var xhr=new XMLHttpRequest();
var fd;
var des=document.getElementById('load');
var num=document.getElementById('upimg');
var file;
const LENGTH
=10*1024*1024;
var start;
var end;
var blob;
var pecent;
var filename;
//var pending;
//var clock;
function upfile(){
start
=0;
end
=LENGTH+start;
//pending=false;

file
=document.getElementsByName('mof')[0].files[0];
//filename = file.name;
if(!file){
alert(
'請選擇文件');
return;
}
//clock=setInterval('up()',1000);
up();

}

function up(){
/*
if(pending){
return;
}
*/
if(start<file.size){
xhr.open(
'POST','file.php',true);
//xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(this.readyState==4){
if(this.status>=200&&this.status<300){
if(this.responseText.indexOf('failed') >= 0){
//alert(this.responseText);
alert('文件發送失敗,請重新發送');
des.style.width
='0%';
//num.innerHTML='';
//clearInterval(clock);
}else{
//alert(this.responseText)
// pending=false;
start=end;
end
=start+LENGTH;
setTimeout(
'up()',1000);
}

}
}
}
xhr.upload.onprogress
=function(ev){
if(ev.lengthComputable){
pecent
=100*(ev.loaded+start)/file.size;
if(pecent>100){
pecent
=100;
}
//num.innerHTML=parseInt(pecent)+'%';
des.style.width=pecent+'%';
des.innerHTML
= parseInt(pecent)+'%'
}
}
       
       //分割文件核心部分slice blob
=file.slice(start,end);
fd
=new FormData();
fd.append(
'mof',blob);
fd.append(
'test',file.name);
//console.log(fd);
//pending=true;
xhr.send(fd);
}
else{
//clearInterval(clock);
}
}

function change(){
des.style.width
='0%';
}

</script>
</body>
</html>

file.php:

<?php 
/****
waited
***
*/
//print_r($_FILES);exit;

$file = $_FILES['mof'];

$type = trim(strrchr($_POST['test'], '.'),'.');

// print_r($_POST['test']);exit;

if($file['error']==0){
if(!file_exists('./upload/upload.'.$type)){
if(!move_uploaded_file($file['tmp_name'],'./upload/upload.'.$type)){
echo 'failed';
}
}
else{
$content=file_get_contents($file['tmp_name']);
if (!file_put_contents('./upload/upload.'.$type, $content,FILE_APPEND)) {
echo 'failed';
}
}
}
else{
echo 'failed';
}

?>

1 運行:

2 選擇2G文件測試:

3 完成並正常播放:


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com