JavaScript實現拖拽預覽，AJAX小檔案上傳

標籤：turn   data-   頁面   list   func   htm   reg   utf-8   move   

本地上傳，提前預覽（圖片，視頻）

1.html中div標籤預覽顯示，button標籤觸發上傳事件。

<div  id="drop_area" style="border:3px dashed silver;width:200px; height:200px">將圖片拖拽到此</div><button onclick="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儲存檔案

<?phpprint_r($_FILES["file"]);$name = $_FILES["file"]["name"]; //中文可能亂碼使用iconv函數move_uploaded_file($_FILES["file"]["tmp_name"],iconv("UTF-8","gb2312",$name));?
>

JavaScript實現拖拽預覽，AJAX小檔案上傳