利用datatransfer實現單張圖片預覽和文字預覽
阿新 • • 發佈:2018-12-09
實現單張圖片預覽
首先要給個盒子識別是否拖拽圖片進入區域
<div id="result" class="result">
</div>
<ul>
</ul>
Javascript邏輯程式碼
<script> var oRes = document.getElementById("result") var oUl = document.getElementsByTagName("ul")[0] var obj = {} //建立一個判斷物件 oRes.ondragenter = function(){ //ondragenter 事件在拖動的元素或選擇的文字進入到有效的放置目標時觸發 this.innerHTML = "可以放" } oRes.ondragover = function(e){ //當某被拖動的物件在另一物件容器範圍內拖動時觸發此事件 e.preventDefault() //阻止元素髮生預設的行為 } oRes.ondrop = function(e){ //在一個拖動過程中,釋放滑鼠鍵時觸發此事件 e.preventDefault() var fs = e.dataTransfer.files //新增事件物件的屬性 var reader = new FileReader() //FileReader介面讀取檔案 reader.readAsDataURL(fs[0]) //將檔案讀取為DataURL reader.onload = function(){ if(!obj[this.result]){ //判斷新增圖片路徑是否重複提交 var oLi = document.createElement("li") var oImg = document.createElement("img") oImg.src = this.result //快取圖片路徑 oImg.width = 100 //設定圖片寬高 oImg.height = 100 oLi.appendChild(oImg) //追加節點 oUl.appendChild(oLi) obj[this.result] = this.result }else{ alert("不要重複提交") } } } </script>
實現文字預覽
這裡就給個盒子顯示文字的內容
<div class="result">
</div>
<div id="view">
</div>
Javascript邏輯程式碼
<script> var oRes = document.getElementsByTagName("div")[0] var oView = document.getElementById("view") oRes.ondragenter = function(){ this.innerHTML = "可以放手" } oRes.ondragover = function(e){ e.preventDefault() //阻止元素髮生預設的行為 } oRes.ondrop = function(e){ e.preventDefault() // console.log(e.dataTransfer) var fs = e.dataTransfer.files[0] //獲取新增事件物件的屬性 var reader = new FileReader() reader.readAsText(fs) //將檔案讀取為文字 reader.onload = function(){ // console.log(this.result) oView.innerHTML = this.result //讀取文字 } } </script>
PS:所拖拽的文字有中文的要將文字轉編譯為UTF-8才能顯示出中文
總結:
1.files物件的使用方法
獲取files物件三個屬性,name檔名稱,size檔案大小,type檔案型別,可通過列印檢視
注意:使用者每個選擇的檔案都是一個files物件,而fileList物件則為這些files物件的列表,代表使用者選擇的所有檔案。
2.FileReader介面讀取檔案
FileReader介面主要用來把檔案讀入記憶體,並且讀取檔案中的資料。FileReader介面提供了一個非同步的api,使用該api可以在瀏覽器主執行緒中非同步訪問檔案系統,讀取檔案中的資料。
1.readAsDataUrl 將檔案讀取為DataURL,讀取結果都將儲存在result屬性中
2.readAsText 將檔案讀取為文字,讀取結果都將儲存在result屬性中
3.FileReader事件
例如下面用到的 ondragenter ondragover ondrop
PS:必須要在ondragover中阻止預設事件
4.dataTransfer物件用法
拖拽過程中,一定伴隨著一個datatransfer物件,這個是新增的事件物件。
datatransfer有兩個重要的方法:
1.setData(key,value):設定資料 2.getData(key):獲取資料