HTML5文件實現拖拽上傳

window.onload = function(){  
     var uuz = document.getElementById('fileSpan');  

     uuz.ondragenter = function(e){  
         e.preventDefault();  
     }  

     uuz.ondragover = function(e){  
         e.preventDefault();  
         this.innerHTML = '請鬆開';  
    }  

     uuz.ondragleave = function(e){  
         e.preventDefault();  
         this.innerHTML = '請拖入要上傳的文件';  
     }  

     uuz.ondrop = function(e){  
         e.preventDefault();  

         var upfile = e.dataTransfer.files[0]; //獲取要上傳的文件對象(可以上傳多個)  
         var formdata = new FormData();  
         var xhr = new XMLHttpRequest();  
         formdata.append('upfile', upfile); //設置服務器端接收的name爲upfile  
         xhr.open("post","fileResume.do?method=uploadResumeFile&uploadType="+dragType);
         xhr.onreadystatechange = function(){ 
             if(this.readyState==4){
                 if(this.status==200){ //上傳成功  
                     var resultText = this.responseText;
                     console.info(resultText);
                     //轉json
                     var jsonObj = JSON.parse(resultText);
                     console.info(jsonObj);
                     if(jsonObj.success){
                         //生成input表單
                         var fileId = createInput(jsonObj.uuid);
                         //生成顯示名稱
                         appendFile1(fileId,upfile.name); 
                     }
                 }else{  
                     alert('上傳失敗,請使用另一種方式上傳');  
                 }
             }
         }  

         xhr.send(formdata);  
     }  
 }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章