js代碼
- <!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 οnclick="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","video/ogg"];
- //創建一個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', 'xhr2.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代碼
- <?php
- //$name=$_POST['username'];
- $dir=$_POST['filename'];
- $dir="uploads/".md5($dir);
- file_exists($dir) or mkdir($dir,0777,true);
- $path=$dir."/".$_POST['blobname'];
- //print_r($_FILES["file"]);
- move_uploaded_file($_FILES["file"]["tmp_name"],$path);
- if(isset($_POST['lastone'])){
- echo $_POST['lastone'];
- $count=$_POST['lastone'];
- $fp = fopen($_POST['filename'],"abw");
- for($i=0;$i<=$count;$i++){
- $handle = fopen($dir."/".$i,"rb");
- fwrite($fp,fread($handle,filesize($dir."/".$i)));
- fclose($handle);
- }
- fclose($fp);
- }
- ?>