利用datatransfer实现单张图片预览和文本预览

实现单张图片预览

首先要给个盒子识别是否拖拽图片进入区域

<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):获取数据