首先我們需要在php.ini目錄中的設置：upload_tmp_dir=‘你設置一個上傳地址'(路徑必須對(如果地址不存在或者不對的話，我們是無法上傳我們的切片內容的)，因爲你在php上傳時會設置上傳的地址，不設置就存到默認文件裏)，去掉前面的分號；話不多說直接上代碼
前臺代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>xhr2</title>
</head>
<body>
<div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">
將圖片拖拽到此
</div>
<progress value="0" max="10" id="prouploadfile"></progress>
<span id="persent">0%</span>
<br />
<!--<button onclick="xhr2()">ajax上傳</button>-->
<button onclick="stopup()" id="stop">上傳</button>
<script>
//拖拽上傳開始
//-1.禁止瀏覽器打開文件行爲
document.addEventListener("drop",function(e){ //拖離
e.preventDefault();
})
document.addEventListener("dragleave",function(e){ //拖後放
e.preventDefault();
})
document.addEventListener("dragenter",function(e){ //拖進
e.preventDefault();
})
document.addEventListener("dragover",function(e){ //拖來拖去
e.preventDefault();
})
//上傳進度
var pro = document.getElementById('prouploadfile');
var persent = document.getElementById('persent');
function clearpro(){
pro.value=0;
persent.innerHTML="0%";
}
//2.拖拽
var stopbutton = document.getElementById('stop');
var resultfile=""
var box = document.getElementById('drop_area'); //拖拽區域
box.addEventListener("drop",function(e){
var fileList = e.dataTransfer.files; //獲取文件對象
console.log(fileList)
//檢測是否是拖拽文件到頁面的操作
if(fileList.length == 0){
return false;
}
//拖拉圖片到瀏覽器，可以實現預覽功能
//規定視頻格式
//in_array
Array.prototype.S=String.fromCharCode(2);
Array.prototype.in_array=function(e){
var r=new RegExp(this.S+e+this.S);
return (r.test(this.S+this.join(this.S)+this.S));
};
var video_type=["video/mp4"];
//創建一個url連接,供src屬性引用
var fileurl = window.URL.createObjectURL(fileList[0]);
if(fileList[0].type.indexOf('image') === 0){ //如果是圖片
var str="<img width='200px' height='200px' src='"+fileurl+"'>";
document.getElementById('drop_area').innerHTML=str;
}else if(video_type.in_array(fileList[0].type)){ //如果是規定格式內的視頻
var str="<video width='200px' height='200px' controls='controls' src='"+fileurl+"'></video>";
document.getElementById('drop_area').innerHTML=str;
}else{ //其他格式，輸出文件名
//alert("不預覽");
var str="文件名字:"+fileList[0].name;
document.getElementById('drop_area').innerHTML=str;
}
resultfile = fileList[0];
console.log(resultfile);
//切片計算
filesize= resultfile.size;
setsize=500*1024;
filecount = filesize/setsize;
//console.log(filecount)
//定義進度條
pro.max=parseInt(Math.ceil(filecount));
i =getCookie(resultfile.name);
i = (i!=null && i!="")?parseInt(i):0
if(Math.floor(filecount)<i){
alert("已經完成");
pro.value=i+1;
persent.innerHTML="100%";
}else{
alert(i);
pro.value=i;
p=parseInt(i)*100/Math.ceil(filecount)
persent.innerHTML=parseInt(p)+"%";
}
},false);
//3.ajax上傳
var stop=1;
function xhr2(){
if(stop==1){
return false;
}
if(resultfile==""){
alert("請選擇文件")
return false;
}
i=getCookie(resultfile.name);
console.log(i)
i = (i!=null && i!="")?parseInt(i):0
if(Math.floor(filecount)<parseInt(i)){
alert("已經完成");
return false;
}else{
//alert(i)
}
var xhr = new XMLHttpRequest();//第一步
//新建一個FormData對象
var formData = new FormData(); //++++++++++
//追加文件數據
//改變進度條
pro.value=i+1;
p=parseInt(i+1)*100/Math.ceil(filecount)
persent.innerHTML=parseInt(p)+"%";
//進度條
if((filesize-i*setsize)>setsize){
blobfile= resultfile.slice(i*setsize,(i+1)*setsize);
}else{
blobfile= resultfile.slice(i*setsize,filesize);
formData.append('lastone', Math.floor(filecount));
}
formData.append('file', blobfile);
//return false;
formData.append('blobname', i); //++++++++++
formData.append('filename', resultfile.name); //++++++++++
//post方式
xhr.open('POST', 'server.php'); //第二步驟 修改server.php改爲自己的文件名
//發送請求
xhr.send(formData); //第三步驟
stopbutton.innerHTML = "暫停"
//ajax返回
xhr.onreadystatechange = function(){ //第四步
if ( xhr.readyState == 4 && xhr.status == 200 ) {
console.log( xhr.responseText );
if(i<filecount){
xhr2();
}else{
i=0;
}
}
};
//設置超時時間
xhr.timeout = 20000;
xhr.ontimeout = function(event){
alert('請求超時，網絡擁堵！低於25K/s');
}
i=i+1;
setCookie(resultfile.name,i,365)
}
//設置cookie
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/")
}
//獲取cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function stopup(){
if(stop==1){
stop = 0
xhr2();
}else{
stop = 1
stopbutton.innerHTML = "繼續"
}
}
</script>
</body>
</html>
後臺代碼
<?php$dir=$_POST['filename']; //讀取文件名
$dir="uploads/".md5($dir); //在項目本地（或者合適的位置）設置目錄（存放切片後的文件）
file_exists($dir) or mkdir($dir,0777,true);
$path=$dir."/".$_POST['blobname']; //路徑寫好
move_uploaded_file($_FILES["file"]["tmp_name"],$path); //將臨時文件存放於指定目錄中，
?>
nice 到這裏我們就可以差不多就已經完成切片上傳了！（注：我標紅的位置大家可以進行修改然後引入到自己的項目中了！）
當然我們切片到文件夾裏後，我們肯定是要使用的昂；下面我就開始把切片整合。
我們先把我們的切片文件準備好：我直接上代碼了：
$fp = scandir('uploads');//讀取切片文件夾，這個就是我們的切片文件夾了，
$count = count($fp)-2; // 然後需要統計文件的總數量，記得要減去2哦，因爲會讀取2個(.和..)，所以減去2，（我會在下面介紹其他方法的）
$url = fopen('./aaa/aaa.mp4','abw');//設置切片整合到一起後，我們的視頻存放的位置。
for ($i=0; $i <$count ; $i++) {
$handle = fopen('111'."/".$i,'rb');//根據循環動態讀取切片的文件名（注：我是0-14的哦，如果你是1-15記得循環要從$i=1開始的哦）
fwrite($url,fread($handle,filesize('111'."/".$i)));//開始整合了
fclose($handle);//關閉我們之前打開的項目
}
fclose($url);
那麼我還有一種方法進行統計指定文件下的目錄總數
$i=0;//設置一個默認0；
$dir = opendir('upload');//打開文件
while(false !== ( $file = readdir($dir)) ) {
if (( $file != '.' ) && ( $file != '..' )) {
if ( is_dir('upload' . '/' . $file) ) {
recurse_file('upload' . '/' . $file);
}
else {
$i++;
}
}
}
echo $i;這樣就得到文件內的總數了；
到這，我們的切片上傳就寫完了！如果有什麼問題的話，歡迎大家進行技術交流！