1.html中div標籤預覽顯示,button標籤觸發上傳事件。
<div id="drop_area" style="border:3px dashed silver;width:200px; height:200px">將圖片拖拽到此</div>
<button οnclick="xhr2()">ajax上傳</button>
2.禁止瀏覽器打開文件行爲
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();
})
3.拖拽,預覽文件
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保存文件
<?php
print_r($_FILES["file"]);
$name = $_FILES["file"]["name"]; //中文可能亂碼使用iconv函數
move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));
?>