標籤：上傳圖片 出錯 否則 互動 plain 文字 eve link encoding
首先放一個今天學到的小demo：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>測試</title> <style> * { margin: 0; padding: 0; } .myImg { width: 200px; } #imgs { width: 500px; height: 500px; background-color: cornsilk; margin: 50px auto; } </style></head><body><div id="imgs" ondragover="allowDrop(event)" ondrop="dropImg(event)"></div><script> //禁用掉瀏覽器掉預設行為 function allowDrop(e) { e.preventDefault(); } //當拖放結束時調用： function dropImg(e) { //禁用掉瀏覽器掉預設行為 e.preventDefault(); //data為擷取到的檔案，只能在ondrop中得到 var data = e.dataTransfer.files; //擷取多個檔案時，遍曆檔案，判斷檔案是否為我們所要求的類型，並做出處理 for (var i = 0; i < data.length; i++) { //判斷檔案類型,indexOf()的結果假為-1,真為0 var myType = data[i].type; console.log(myType.indexOf(‘image‘)); if (myType.indexOf(‘image‘) === 0) { //FileReader為html5中封裝的方法，用於將檔案讀入記憶體，並讀取檔案中的資料 var reader = new FileReader(); //讀取拖入檔案的DataURL,無傳回值。 reader.readAsDataURL(data[i]); //讀取檔案成功時觸發 reader.onload = function () { //this.result為當前檔案的base64解碼 //console.log(this.result); //建立一個img節點並添加到當前框內 var img = document.createElement("img"); img.src = this.result; img.className = "myImg"; document.getElementById("imgs").appendChild(img); }; //無論是否成功讀取時都會觸發，用來彈出錯誤或上傳資料 reader.onloadend = function () { //如果上傳出錯 if (reader.error) { alert(reader.error); } else { //可以進行與伺服器的上傳互動 } } } else { //如果傳入的非圖片格式 alert("請上傳圖片！"); } } console.log(data); }</script></body></html>
效果大家可以試一下，每一步的注釋也有寫。下面具體說一下：
因為這裡的div相當於一個被拖入對象，我們想要實現的效果是圖片拖入時把圖片呈現出來。而瀏覽器在解讀到圖片放入時預設行為是解析圖片並顯示。這顯然不會是我們想要的效果。所以需要禁用掉瀏覽器對當前事件的預設行為也就是：preventDefault();
下面就是編寫當圖片放入時的函數，這裡又一個點。是HTML5中的fileAPI，為我們提供了很大的便利。
根據我們列印出來的結果：
我們可以看到，根據dataTransfe.filesr我們可以看到所選的檔案清單，有興趣的同學可以具體百度，我這裡就不詳細介紹了。
HTML5還提供了FileReader介面：用於將檔案讀入記憶體，並讀取檔案中的資料。var reader = new FileReader();
該介面總共有四個方法和六個事件：
?readAsBinaryString(file):讀取檔案為二進位
?readAsDataURL(file):讀取檔案DataURL
?readAsText(file,[encoding])：讀取檔案為文本
?about(none)：中斷檔案讀取
===================================================
?onabort：讀取檔案中斷時觸發
?onerror：讀取檔案出錯時觸發
?onloadstart：讀取檔案開始時觸發
?onprogress：讀取檔案中時一直觸發
?onload：讀取檔案成功時觸發
?onloadend：讀取檔案結束時觸發（成功和失敗都會觸發）
以上事件參數e有e.target.result或this.result指向讀取的結果。
拖放API：
拖放屬性：將需要拖放的元素的dragable屬性設定為true（dragable=”true”）【img元素和a元素預設可以拖放。】
拖放事件：（分為拖放元素事件和目標元素事件）
拖放元素事件：
?dragstart:拖拽前觸發
?drag ,拖拽前、拖拽結束之間，連續觸發
?dragend , 拖拽結束觸發
目標元素事件：
?dragenter , 進入目標元素觸發
?dragover ,進入目標、離開目標之間，連續觸發
?dragleave , 離開目標元素觸發
?drop , 在目標元素上釋放滑鼠觸發
但是，需要注意的是：在目標元素中dragover和drop事件中要阻止預設行為（拒絕被拖放），否則拖放不能被實現！
=======================================================================================
DataTransfer對象：專門用於存放拖放時要攜帶的資料，可以被設定為拖放事件的dataTransfer屬性。三個屬性： ?effectAllowed : 設定游標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
?effectAllowed：設定拖放操作的視覺效果
?types：存入資料的種類，字串的偽數組
?files：擷取外部拖拽的檔案，返回一個fileList列表，filesList下有個type屬性，返迴文件的類型
?setData() : 設定資料 key和value(必須是字串)
?getData() : 擷取資料，根據key值，擷取對應的value
?clearData()：清除DataTransfer對象存放的資料
?setDragImage(imageUrl,log x,long y)：用img元素來設定拖放表徵圖
var dt=e.dataTransfer;//作為拖放事件的dataTransfer屬性 dt.effectAllowed=‘copy‘;//設定游標樣式 dt.setData(‘text/plain‘,‘hello‘);//設定拖放文字 dt.setDragImage(dragIcom,-10,-10);//設定拖放表徵圖
h5實現本地圖片或檔案的上傳
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
