HTML5之FileReader接口

最新推荐文章于 2023-07-08 16:42:34 发布
最新推荐文章于 2023-07-08 16:42:34 发布
阅读量249 收藏
点赞数
文章标签： HTML5 FiledReader 图片上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hanhanyoona/article/details/81065481
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		table {
          font-family: verdana,arial,sans-serif;
          font-size:11px;
          color:#333333;
          border-width: 1px;
          border-color: #666666;
          border-collapse: collapse; /*合并边框*/
      }
      table th {
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #666666;
          background-color: #dedede;
      }
      table td {
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #666666;
          background-color: #ffffff;
      }
	</style>
</head>
<body>
	<h4>FileReader接口的方法</h4>
	<table border="1">
		<thead>
			<tr>
				<th>方法名</th>
				<th>参数</th>
				<th>描述</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>readAsBinaryString</td>
				<td>file</td>
				<td>将文件读取为二进制编码</td>
			</tr>
			<tr>
				<td>readAsText</td>
				<td>file,[encoding]</td>
				<td>将文件读取为文本</td>
			</tr>
			<tr>
				<td>readAsDataURL</td>
				<td>file</td>
				<td>将文件读取为DataURL</td>
			</tr>
			<tr>
				<td>abort</td>
				<td>none</td>
				<td>终端读取操作</td>
			</tr>
		</tbody>
	</table>
	<h4>FileReader接口事件</h4>
	<table border="1">
		<thead>
			<tr>
				<td>事件</td>
				<td>描述</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>onabort</td>
				<td>中断</td>
			</tr>
			<tr>
				<td>onerror</td>
				<td>出错</td>
			</tr>
			<tr>
				<td>onloadstart</td>
				<td>开始</td>
			</tr>
			<tr>
				<td>onprogress</td>
				<td>正在读取</td>
			</tr>
			<tr>
				<td>onload</td>
				<td>读取成功</td>
			</tr>
			<tr>
				<td>onloadend</td>
				<td>读取完成 ,无论成功失败</td>
			</tr>
		</tbody>
		
	</table>

	<h4>FileReader接口的使用</h4>
	<div>
		<label>请选择一个文件: </label>
		<br>
		<input type="file" id="file">
		<input type="button" name="" value="读取图像" οnclick="readAsDataURL()">
		<input type="button" name="" value="读取二进制数据" οnclick="readAsBinaryString()">
		<input type="button" name="" value="读取文本文件" οnclick="readAsText()">
	</div>
	<div id="result" name="result">
		
	</div>
</body>
<script type="text/javascript">
	
	var file = document.getElementById('file');
	var result = document.getElementById('result')
	//判断浏览器是否支持FileReader接口
	if(typeof FileReader == 'undefined'){
		result.innerHTML = '<p>你的浏览器不支持FileReader接口!</p>'
		//让选择控件不可操作
		file.setAttribute('disabled', 'disabled')
	}


	//读取为DataURL
	function readAsDataURL(){
		//检验是否为图片文件
		var file = document.getElementById('file').files[0];
		if(!/image\/\w+/.test(file.type)){
			alert('请上传正确格式的图片')
			return false 
		}


		var reader = new FileReader();
		reader.readAsDataURL(file);
		// console.log(reader.readAsDataURL(file))
		reader.οnlοad=function(e){
			var result = document.getElementById('result')
			result.innerHTML='<img src="'+this.result+'" alt="">'
		}
	}

	//读取为二进制编码
	function readAsBinaryString(){
		var file = document.getElementById('file').files[0]
		var reader = new FileReader()
		reader.readAsBinaryString(file)
		reader.οnlοad=function(f){
			console.log(f)
			var result = document.getElementById('result')
			result.innerHTML=this.result
		}
	}


	//将文件读取为文本
	function readAsText(){
		var file = document.getElementById('file').files[0]
		var reader = new FileReader()
		reader.readAsText(file)
		reader.onload = function(e){
			var result = document.getElementById('result')
			result.innerHTML = this.result
		}
	}

</script>
</html>



五花毛
关注
HTML5中FileReader接口使用方法实例详解
12-13
FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。 1、FileReader接口的方法 FileReader接口有4个...
HTML5学习之FileReader接口
编写博客，学习交流
01-18 410
用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。 1、FileReader接口的方法 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果...
FileReader接口
最新发布
qq_46030141的博客
07-08 126
h5读取文件api
filereader php,HTML5 FileReader接口的详细介绍
weixin_42128988的博客
03-26 109
1、FileReader概述FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsF...
input里面file实现上传图片及预览功能
weixin_43202280的博客
11-06 1344
在这里插入简单的HTML代码片 &lt;form action=""&gt; 文件： &lt;input type="file" name="myFile" id="myFile" onchange="getFileContent();"&gt; &lt;br&gt; &lt;input type="submit"&a
html5文本阅读,HTML5 FileReader
weixin_39681724的博客
05-31 229
前面本博介绍了File API，这里将继续介绍一下FileReader，用FileReader具体地读取文件内容。NOTE: 在chrome浏览器上本地测试的时候，即以file://xxx这种形式测试本文中的demo，会出现FileReader读取不到内容的情况，表现为FileReader的result为空或者FileReader根本就没有去读取文件内容，FileReader各个事件没有触发；这种...
HTML5 FileReader接口学习笔记
06-20
总结起来，HTML5的FileReader接口为Web应用程序提供了强大的本地文件读取功能，支持异步处理，使得开发者能以各种方式处理用户上传的文件，极大地丰富了Web应用的功能。通过了解和熟练运用FileReader接口，开发者...
JavaScript html5利用FileReader实现上传功能
10-20
本文重点介绍如何利用JavaScript中的FileReader接口来实现HTML5网页上的文件上传功能。FileReader接口是HTML5提供的一个用于读取文件的API，它允许Web应用程序异步读取存储在用户计算机上的文件（如用户上传的文件）...
JS+HTML5 FileReader对象用法示例
10-20
JavaScript（简称JS）是一种广泛使用的网页脚本语言，而HTML5是HTML标准的最新版本，引入了诸多新特性和API，其中包括FileReader对象。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件（例如用户...
html5 FileReader 实现本地图片上传并预览应用实例
热门推荐
baidu_41601048的博客
01-07 1万+
1、FileReader接口的方法 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。   FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,...
JavaScript通过filereader接口读取文件
10-19
主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
FieldReader
心里打结，为了过得舒服点，只好拼命的开结
08-14 200
package utils; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.InputStream; import java.io.InputStreamR...
HTML api实例详解,HTML5中FileReader接口使用方法实例详解
weixin_29038345的博客
06-10 472
用来把文件读入内存，并且读取文件中的数据。FileReader接口提供了一个异步API，使用该API可以在浏览器主线程中异步访问文件系统，读取文件中的数据。到目前文职，只有FF3.6+和Chrome6.0+实现了FileReader接口。1、FileReader接口的方法FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结...
使用FileReader接口读取文件内容
weixin_33843947的博客
01-12 2913
如果想要读取或浏览文件，则需要通过FileReader接口，该接口不仅可以读取图片文件，还可以读取文本或二进制文件，同时，根据该接口提供的事件与方法，可以动态侦察文件读取时的详细状态，接下来，我们详细介绍FileReader接口的使用方法。 FileReader 接口 FileReader 接口提供了一个异步的API，通过这个API可以从浏览器主线程中异步访问文件系统中的数据，基于此原因，Fi...
fileReader接口
y670340559的博客
03-16 387
function preview(file,preview) {   var prevDiv = document.getElementById(preview); if (file.files && file.files[0]){   var reader = new FileReader();   reader.onload = function(evt){
Web API接口 FileReader学习笔记
Dragon.G
05-29 1751
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。一、介绍FileReader接口的方法FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。FileReader接口事件FileReade
FileReader：读取本地图片文件并显示
经验在于积累而不在于年限---dreamboycx
08-22 1561
要想在页面上显示本地图片，以前我们通常的做法是将选择的图片文件上传至后端服务器，后端对其进行存储，再将图片的URL返回到前端，前端通过这个URL来显示图片。而HTML5的FileReader接口支持本地预览，FileReader接口主要是将文件读入内存，并提供相应的方法，来读取文件中的数据，当然就能显示本地图片不需上传了。目前高级浏览器实现了FileReader接口，所以像IE6这些老东西直接滚粗
掌握HTML5 FileReader接口：异步文件读取与应用实例
"HTML5 FileReader接口学习笔记" HTML5 FileReader接口是Web开发中一个重要的功能，它允许Web应用程序在用户的本地设备上异步读取文件内容，包括图像、文本或其他类型的数据，而无需将文件上传到服务器。这个接口在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值