【html5】06-文件读取

最新推荐文章于 2024-07-20 18:16:53 发布

Mikuc

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量606

点赞数 11

分类专栏： HTML5 文章标签： html5 前端 html

本文链接：https://blog.csdn.net/m0_68467925/article/details/139046092

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

引言

在HTML5中，我们可以使用FileReader API来读取用户通过<input type="file">元素选择的文件。这个API允许Web应用程序异步地读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。

知识点陈列

```html```

☞ FileReader

       FileReader                接口有3个用来读取文件方法返回结果在result中

       readAsBinaryString    ---将文件读取为二进制编码
       readAsText           ---将文件读取为文本
       readAsDataURL           ---将文件读取为DataURL

☞ FileReader 提供的事件模型

     onabort     中断时触发
     onerror     出错时触发
     onload     文件读取成功完成时触发
     onloadend   读取完成触发，无论成功或失败
     onloadstart 读取开始时触发
     onprogress 读取中

适用范围：上传小文件

实现代码

获取文件：只获取了一个文件

开始读取：创建读取器对象，调用该对象里的方法，将文件读取为xxx格式

读取结果：当文件读取完成之后，才打印文件里的内容
<body>
	<input type="file" name="">
	<script type="text/javascript">
		var input = document.querySelector("input");
// 当文件输入元素的内容改变时（例如用户选择了一个新的文件），这个匿名函数会被调用
		input.onchange = function () {
			//获取到文件
			var file = this.files[0];
			//开始读取，创建读取器
			var reader = new FileReader();
			//开始读取
			reader.readAsText(file);
			//获取读取的结果
			//当文件读取完成后，才可以获取文件信息内容
			reader.onload = function () {
				console.log(reader.result);
			}
		}
	</script>
</body>
当提交了文件之后，在控制台会打印出文件里的内容

案例-读取图片显示

1完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>显示图片</title>
</head>
<body>
	   <input type="file">
	   <script type="text/javascript">
	   	
	   		 var file_btn=document.querySelector("input");

	   		 	 file_btn.onchange=function() {

	   		 	 		var file=this.files[0];
	   		 	 		
	   		 	 		//判断后缀名是否合法
	   		 	 
	   		 	 		var filename=file.name.substring(file.name.lastIndexOf("."));

	   		 	 		var imgs=[".png",".jpg","gif",".ico"];

	   		 	 		var flag=false;

	   		 	 		for(var i=0; i<imgs.length; i++) {
	   		 	 			 if(imgs[i]==filename) {
	   		 	 			 	 flag=true;
	   		 	 			 	 break;
	   		 	 			 }
	   		 	 		}

	   		 	 		if(flag) {
	   		 	 			
	   		 	 			 var reader=new FileReader();
	   		 	 			 	 reader.readAsDataURL(file);

	   		 	 			 reader.onload=function() {
	   		 	 			 	  var img=document.createElement("img");
	   		 	 			 	  	  img.src=reader.result;
	   		 	 			 	  document.body.appendChild(img);
	   		 	 			 }

	   		 	 		}else {
	   		 	 			alert("文件类型不正确，请重新选择");
	   		 	 		}

	   		 	 }

	   </script>
</body>
</html>

2 效果说明

点击上传对应正确格式的图片，会直接渲染在页面上，

每次只能上传一张图片，可以多次上传，图片不会被覆盖

Mikuc

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
【html5】06-文件读取

这个API允许Web应用程序异步地读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件或数据。开始读取：创建读取器对象，调用该对象里的方法，将文件读取为xxx格式。每次只能上传一张图片，可以多次上传，图片不会被覆盖。读取结果：当文件读取完成之后，才打印文件里的内容。点击上传对应正确格式的图片，会直接渲染在页面上，当提交了文件之后，在控制台会打印出文件里的内容。在HTML5中，我们可以使用。获取文件：只获取了一个文件。API来读取用户通过。适用范围：上传小文件。
复制链接

扫一扫