JavaScript 中的FileReader对象（实现上传图片预览）
方法一：使用js的FileReader对象
1、FileReader对象简介
1.检测浏览器对FileReader的支持
if(window.FileReader) {
var fr = new FileReader();
// add your code here
}
else {
alert("Not supported by your browser!");
}
调用FileReader对象的方法
FileReader 的实例拥有 4 个方法，其中 3 个用以读取文件，另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能，
需要注意的是 ，无论读取成功或失败，方法并不会返回读取结果，这一结果存储在 result属性中。
|
方法名 |
参数 |
描述 |
|
abort |
none |
中断读取 |
|
readAsBinaryString |
file |
将文件读取为二进制码 |
|
readAsDataURL |
file |
将文件读取为 DataURL |
|
readAsText |
file, [encoding] |
将文件读取为文本 |
readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。这个方法非常容易理解，将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：该方法将文件读取为二进制字符串，通常我们将它传送到后端，后端可以通过这段字符串存储文件。
readAsDataURL：这是例子程序中用到的方法，该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。（其中base64的方式就是由此来获得的。。）
2. FileReader处理事件简介
FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。
|
事件 |
描述 |
|
onabort |
中断时触发 |
|
onerror |
出错时触发 |
|
onload |
文件读取成功完成时触发 |
|
onloadend |
读取完成触发，无论成功或失败 |
|
onloadstart |
读取开始时触发 |
|
onprogress |
读取中 |
文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。
fr.onload = function() {
this.result;
};
例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FileReader</title>
</head>
<body>
<p>
<label>请选择一个文件：</label>
<input type="file" id="file" />
<input type="button" value="读取图像" onclick="readAsDataURL()" />
<input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
<input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div id="result" name="result"></div> <script type="text/javascript">
var result=document.getElementById("result");
var file=document.getElementById("file");
//判断浏览器是否支持FileReader接口
if(typeof FileReader == 'undefined'){
result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
//使选择控件不可操作
file.setAttribute("disabled","disabled");
} function readAsDataURL(){
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=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.onload=function(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(f){
var result=document.getElementById("result");
//显示文件
result.innerHTML=this.result;
}
} </script> </body>
</html>
3 、使用js的FileReader对象实现上传图片时的图片预览功能
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format-detection" content="telephone=no">
<title>test</title>
<script>
//选择图片时预览功能
function imageshow(source){
var file = source.files[0];
var imageid = source.id;
if (window.FileReader) {
var fr = new FileReader();
fr.onloadend = function(e) {
document.getElementById("portrait"+imageid).src = e.target.result;
};
fr.readAsDataURL(file);
}
document.getElementById("image"+imageid).style.display="none";
document.getElementById("show"+imageid).style.display="block";
}
</script>
</head>
<body>
<div>
<div id="image1" >
<p>上传截图</p>
<input type="file" name="screenshot1" id="1" onchange="imageshow(this)"/>
</div>
<div id="show1" style="display:none;">
<img src="" id="portrait1" width="100" height="70">
</div>
<div id="image2">
<p>上传截图</p>
<input type="file" name="screenshot2" id="2" onchange="imageshow(this)"/>
</div>
<div id="show2" style="display:none;">
<img src="" id="portrait2" width="100" height="70">
</div>
<div id="image3">
<p>上传截图</p>
<input type="file" name="screenshot3" id="3" onchange="imageshow(this)"/>
</div>
<div id="show3" style="display:none;">
<img src="" id="portrait3" width="100" height="70" >
</div>
</div>
</body>
</html>
方法二：使用window.createObjectURL
直接上代码：
<!DOCTYPE html>
<html>
<head>
<title>图片上传预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" />
<br>
<img src="" width="100" height="100" id="img0" >
</form>
<script>
$("#file0").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ; //取得该文件的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) {
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) {
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) {
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>
</body>
</html>
参考原文：http://www.cnblogs.com/faith3/p/6371477.html
JavaScript 中的FileReader对象（实现上传图片预览）的更多相关文章
- javascript 利用FileReader和滤镜上传图片预览
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File或 Blob对象指定要读取的文件或数据. 1.FileReader接口的方法 Fi ...
- 通过HTML5 FileReader实现上传图片预览功能
原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...
- 使用FileReader实现前端图片预览
在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性. 这种方法的缺点是:必须要先把图片上传到服务器.那么问题来了 ...
- JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释，全局对象，隐含的全局概念
JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html> <body> <script type="t ...
- JavaScript中的事件对象
JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...
- JavaScript中创建字典对象（dictionary）实例
这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...
- Javascript学习1 - Javascript中的类型对象
原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...
- 简单使用JSON,JavaScript中创建 JSON 对象(一)
JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...
- JavaScript中的window对象
JavaScript中的window对象:http://www.cnblogs.com/kissdodog/archive/2013/01/01/2841464.html
随机推荐
- vue中怎么实现获取当前点击对象this
应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...
- zabbix使用自动发现监控esxi的磁盘存储storage
zabbix使用自动发现监控esxi的磁盘存储storage 在任意一台可以访问vcenter的zabbix-agent服务器上添加exsi的磁盘监控模板即可 创建模板过程: custom.esxi. ...
- redis-list操作
List操作,redis中的List在在内存中按照一个name对应一个List来存储.如图: lpush(name,values) # 在name对应的list中添加元素,每个新的元素都添加到列表的最 ...
- Jmeter性能测试之分布式(五)
Jmeter是纯Java开发的开源性能测试工具, Java程序是很吃内存的, 有时候一台负载机给服务器的压力是不够的, 需要很多台同时负载, 这个时候就需要用到分布式了. 1. 组网图大概就是这样的 ...
- python实现目录大小计算（含子目录）
path=r"F:\\PYTHON\\day8\\ftp_server\\"#这里我直接写了固定地址,你可以自己输入 file_size = 0 def split_doc(pat ...
- 一起学HBase——总结HBase中的PUT、GET、DELETE操作
传统的关系型数据库有CRUD增删改查操作,同样对于NoSQL列式数据库也有CRUD操作.本文对HBase中常用的Scan.GET.PUT.DELETE操作的用法做个总结. Put操作 Put相当于传统 ...
- Python学习（三十四）—— Django之ORM之单表、联表操作
一.单表查询API汇总 <1> all(): 查询所有结果 <2> filter(**kwargs): 它包含了与所给筛选条件相匹配的对象 <3> get(**kw ...
- python数据类型——数据转换
数据类型有很多种,比如数值和字符,比如6和a,字符是需要加双引号的,下面的例子运行的结果是不一样的,数值会相加而字符会相连 print(6+6)print("6"+"6& ...
- jsonwebtoken收藏博客地址
这个东西也不是很懂,但是查了一下资料,大概知道是什么了,具体要怎么嵌套到具体自己需要实现的功能里面,这个跨度还是有点大, 先把博客地址给收藏了. 这里是Java版示例 简书参考 js示例 github ...
- 关于getchar-scanf函数的相关坑！
首先,我们编写如下所示的代码: #include <stdio.h> void test(int n) { ; ; ; a = b; b = c; c = n; printf(" ...