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);
}
}
HTML5文件實現拖拽上傳
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.