檔案上傳(拖拽檔案)
阿新 • • 發佈:2018-12-23
4.ajax上傳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);
5.php儲存檔案》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('請求超時!'); } }