實現單張圖片預覽

首先要給個盒子識別是否拖拽圖片進入區域

<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):獲取資料