1. 程式人生 > >檔案上傳(拖拽檔案)

檔案上傳(拖拽檔案)

var box = document.getElementById('drop_area'); //拖拽區域     
box.addEventListener("drop",function(e){           
    var fileList = e.dataTransfer.files; //獲取檔案物件    
    //檢測是否是拖拽檔案到頁面的操作            
    if(fileList.length == 0){                
        return false;            
    }             
    //拖拉圖片到瀏覽器,可以實現預覽功能    
    //規定視訊格式  
    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];             
},false);  
4.ajax上傳
function xhr2(){  
    var xhr = new XMLHttpRequest();//第一步  
    //新建一個FormData物件  
    var formData = new FormData(); //++++++++++  
    //追加檔案資料  
    formData.append('file', resultfile);  
    //post方式  
    xhr.open('POST', 'xhr2.php'); //第二步驟  
    //傳送請求  
    xhr.send(formData);  //第三步驟  
    //ajax返回  
    xhr.onreadystatechange = function(){ //第四步  
    if ( xhr.readyState == 4 && xhr.status == 200 ) {  
      console.log( xhr.responseText );        
    }  
  };  
    //設定超時時間  
    xhr.timeout = 10000;  
    xhr.ontimeout = function(event){  
    alert('請求超時!');  
  }           
}  
5.php儲存檔案