javascript基础之拖拽（2）（详细篇）---FileReader对象，blod对象

逃离我推掉我的手 2024-04-18 13:02 44阅读 0赞

## 目标导航： ##

接上一篇文章：[https://blog.csdn.net/weixin\_44797182/article/details/100584598][https_blog.csdn.net_weixin_44797182_article_details_100584598]

4，FileReader对象（方法 事件）  
    4,1使用方法

5，blod对象

6,文件拖拽 =》从浏览器外获取数据  
    6.1,拖拽读取文件信息–使用dataTransfer  
    6.2拖拽显示图片及信息–使用blob对象

### 4，FileReader对象 ###

FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。简单的理解就是文件读取

> 使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。

##### 方法 #####

**需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。**

<table> 
 <thead> 
  <tr> 
   <th>方法定义</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>abort():void</td> 
   <td>终止文件读取操作</td> 
  </tr> 
  <tr> 
   <td>readAsArrayBuffer(file):void</td> 
   <td>异步按字节读取文件内容，结果用ArrayBuffer对象表示</td> 
  </tr> 
  <tr> 
   <td>readAsBinaryString(file):void</td> 
   <td>异步按字节读取文件内容，结果为文件的二进制串</td> 
  </tr> 
  <tr> 
   <td>readAsDataURL(file):void</td> 
   <td>异步读取文件内容，结果用data:url的字符串形式表示</td> 
  </tr> 
  <tr> 
   <td>readAsText(file,encoding):void</td> 
   <td>异步按字符读取文件内容，结果用字符串形式表示</td> 
  </tr> 
 </tbody> 
</table>

##### 事件 #####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>onabort</td> 
   <td>当读取操作被中止时调用</td> 
  </tr> 
  <tr> 
   <td>onerror</td> 
   <td>当读取操作发生错误时调用</td> 
  </tr> 
  <tr> 
   <td>onload</td> 
   <td>当读取操作成功完成时调用</td> 
  </tr> 
  <tr> 
   <td>onloadend</td> 
   <td>当读取操作完成时调用,不管是成功还是失败</td> 
  </tr> 
  <tr> 
   <td>onloadstart</td> 
   <td>当读取操作将要开始之前调用</td> 
  </tr> 
  <tr> 
   <td>onprogress</td> 
   <td>在读取数据过程中周期性调用</td> 
  </tr> 
 </tbody> 
</table>

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件`以文本方式读取`，读取的结果即是这个文本文件中的内容。

readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。

readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。`这里的小文件通常是指图像与 html 等格式的文件`。（其中base64的方式就是由此来获得的。。）

**`文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充`。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。**

#### 4,1使用方法 ####

FileReader通过异步的方式读取文件内容，结果均是通过事件回调获取；实例如下：打开文件对话框读取文本文件/图片

查看图片输出结果：  
![在这里插入图片描述][20190907150535593.PNG]  
查看.txt输出结果：  
![在这里插入图片描述][20190907152318133.PNG]  
很明显，readAsDataURL会将文件内容进行`base64编码`后输出，这个很好区分。进行不同操作可以选择不同的方法，例如打印出文本readAsText(），只需要将第三步修改即可`reader.readAsText(fileList,"utf-8");` 中文windows系统 txt 文本多数默认编码 gbk

查看图片输出结果：  
![在这里插入图片描述][20190907151726927.png]  
.txt输出为：txt里面的内容

**readAsText读取文件的单位是字符**，故对于文本文件，只要按规定的编码方式读取即可；而对于媒体文件（图片、音频、视频），其内部组成并不是按字符排列，故采用readAsText读取，会产生乱码，同时也不是最理想的读取文件的方式

这是只介绍常用的，其他的自己可以试验一下；说到FileReader就肯定要提到bold。

### 5，blod对象 ###

一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。

> 一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。

Blob对象可以看做是存放二进制数据的容器，此外还可以通过Blob设置二进制数据的MIME类型。这里不做详细解释，等遇见再说，现在只说一些常用的

#### 5.1，URL.createObjectURL() ####

> URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

objectURL = URL.createObjectURL(blob);

使用`URL.createObjectURL()`函数可以创建一个`Blob URL`，**参数blob是用来创建URL的File对象或者Blob对象**，返回值格式是：`blob://URL。`

在每次调用 createObjectURL() 方法时，都会创建一个新的 URL 对象，即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时，每个对象必须通过调用 URL.revokeObjectURL() 方法传入创建的URL为参数，用来释放它。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，应该在安全的时机主动释放掉它们。

#### 5.2，URL.revokeObjectURL() ####

> URL.revokeObjectURL() 静态方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的URL 对象。当你结束使用某个 URL 对象时，应该通过调用这个方法来让浏览器知道不再需要保持这个文件的引用了。

window.URL.revokeObjectURL(objectURL);

参数: objectURL 是一个通过URL.createObjectURL()方法创建的对象URL.

### 6,文件拖拽 =》从浏览器外获取数据 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]

#### 6.1,拖拽读取文件信息--使用dataTransfer ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>从浏览器外拖拽</title>
    		<style type="text/css">
    			#content { 
    				width: 300px;
    				height: 300px;
    				border: 1px dashed;
    				margin: 20px;
    			}
    
    			img { 
    				width: 300px;
    				height: 300px;
    			}
    		</style>
    	</head>
    	<body>
    		<h3>HTML5拖放API之本地文件拖放</h3>
    		<hr />
    		<div id="content">
    			请将文件拖放至此处。
    		</div>
    		<div id="demo">
    
    		</div>
    
    		<script type="text/javascript">
    			//两个变量分别为图片存储位置,和显示的内容
    			var content = document.getElementById("content")
    			var demo = document.getElementById("demo")
    			
    			content.ondragover = function(e) { 
    				e.preventDefault();
    			}
    			content.ondrop = function(e) { 
    				e.preventDefault();
    				var str = "";
    				this.innerHTML = "";
    				var files = e.dataTransfer.files;
    				for (var i = 0; i < files.length; i++) { 
    					var fileList = files[i];
    					var reader = new FileReader();
    					reader.readAsDataURL(fileList);
    					reader.onload = function() { 
    						var img = new Image();
    						img.src = this.result;
    						content.appendChild(img)
    					}
    					console.log(fileList);
    					var lastDate = fileList.lastModifiedDate;
    					var lastDateStr = lastDate.toLocaleString(); //2019/8/28 下午10:41:06
    					// console.log(lastDate.toLocaleDateString());//2019/8/28
    					// console.log(lastDate.toLocaleTimeString());//下午10:41:06
    					str += '<li>文件名称:' + fileList.name + '</li><li>文件大小:' + fileList.size + '</li><li>文件类型:' + fileList.type +
    						'</li><li>修改时间:' + lastDateStr + '</li>';
    					// console.log(str); 
    					demo.innerHTML = '<ul>' + str + '</ul>';
    				}
    			}
    
    			// console.log(fileList)
    				// lastModified: 1567003356162
    				// lastModifiedDate: Wed Aug 28 2019 22: 42: 36 GMT + 0800(中国标准时间) {}
    				// name: "捕获.PNG"
    				// size: 28725
    				// type: "image/png"
    				// webkitRelativePath: ""
    				//等等
    		</script>
    	</body>
    </html>

#### 6.2拖拽显示图片及信息--使用blob对象 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<meta name="viewport" content="width=device-width, initial-scale=1">
    		<title>使用blod对象实现拖拽</title>
    		<style type="text/css">
    			#content{ 
    				width:300px;
    				height:350px;
    				border: 1px dashed red;
    			}
    			#output{ 
    				width:300px;
    				text-align: center;
    			}
    			img{ 
    				width: 300px;
    				height: 300px;
    			}
    		</style>
    	</head>
    	<body>
    		<h3>拖拽图片进入</h3>
    		<div id="content">
    			
    		</div>
    		
    		<div id="output">
    			
    		</div>
    		<script type="text/javascript">
    			var content =document.getElementById("content");
    			var output =document.getElementById("output");
    			content.ondragover=function(e){ 
    				e.preventDefault();
    				this.style.overflow="auto"
    			}
    			content.ondrop=function(e){ 
    				e.preventDefault();
    				var files = e.dataTransfer.files;
    				for(var i=0;i<files.length;i++){ 
    					var  fileList=files[i];
    					
    					//使用FileReader
    					// var reader=new FileReader();
    					// reader.readAsDataURL(fileList);
    					
    					//使用blod
    					var imgURL = window.URL.createObjectURL(fileList);
    					var img =new Image();
    					img.src=imgURL;		//src="blob:null/369582d5-883c-4f8a-a8a0-b01b9d654315"
    					this.appendChild(img)
    					// console.log(img) 
    					
    					var lastModifiedDate = fileList.lastModifiedDate;
    					var lastDate=lastModifiedDate.toLocaleString()
    					output.innerHTML="<p>"+fileList.name+"<br>"+fileList.type+"<br>大小:"+fileList.size+"<br>"+lastDate+"<br></p>"
    					
    				}
    			}
    		</script>
    	</body>
    </html>

[https_blog.csdn.net_weixin_44797182_article_details_100584598]: https://blog.csdn.net/weixin_44797182/article/details/100584598
[20190907150535593.PNG]: https://img-blog.csdnimg.cn/20190907150535593.PNG
[20190907152318133.PNG]: https://img-blog.csdnimg.cn/20190907152318133.PNG
[20190907151726927.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/67f72c3c835140288bc914aaf6ea0500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190907192631985.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzE4Mg==,size_16,color_FFFFFF,t_70