<?php header('Content-type:text/html;charset=UTF-8'); ?>
<?php
if ($_FILES) {
if(!file_exists('./uploads/123.zip')) {
move_uploaded_file($_FILES['part']['tmp_name'],'./uploads/123.zip');
} else {
file_put_contents('./uploads/123.zip',file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);
unlink($_FILES['part']['tmp_name']);
}
echo 'ok';
exit;
}
?>
<h1>html5大文件切割上传</h1>
<div id="bar" style="">
<span id="progress">0%</span>
</div>
<input name="mov" type="file" />
<input id="btn" type="button" value="点我" />
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').click(function() {
sendfile();
});
})
function sendfile() {
const LENGTH = 1024 * 1024;
var sta = 0;
var end = sta + LENGTH;
var blob = null;
var fd = null;
/*
xhr 对象
*/
var xhr = null;
var mov = document.getElementsByName('mov')[0].files[0];
//console.log(mov);return;
var totalsize = mov.size;
var percent = 0;
// while(sta < totalsize) {
timer = setInterval(function(){
if (sta>totalsize) {
clearInterval(timer);
};
blob = mov.slice(sta,end);
fd = new FormData();
fd.append('part',blob);
xhr = new XMLHttpRequest();
xhr.open('POST',"",false);
xhr.send(fd);
sta = end;
end = sta + LENGTH;
percent = 100 * end / totalsize;
if(percent > 100) {
percent = 100;
}
// document.getElementById('bar').style.width = percent + '%';
// $('#bar').width(percent+'%');
$('#bar').css({'width':percent+'%', 'background-color':'red'});
$('#progress').html(parseInt(percent)+'%');
},1)
// }
}
</script>