方法一：使用js的FileReader对象

1、FileReader对象简介

1.检测浏览器对FileReader的支持

  1. if(window.FileReader) {
  2.      var fr = new FileReader();
  3.      // add your code here
  4.  }
  5.  else {
  6.      alert("Not supported by your browser!");
  7.  }

调用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 ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

  1. fr.onload = function() {
  2.     this.result;
  3. };

例子1：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>FileReader</title>
  6. </head>
  7. <body>
  8.     <p>
  9.     <label>请选择一个文件：</label>
  10.         <input type="file" id="file" />
  11.         <input type="button" value="读取图像" onclick="readAsDataURL()" />
  12.         <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
  13.         <input type="button" value="读取文本文件" onclick="readAsText()" />
  14.     </p>
  15.     <div id="result" name="result"></div> 
  16.  
  17. <script type="text/javascript">
  18. var result=document.getElementById("result");
  19. var file=document.getElementById("file");
  20. //判断浏览器是否支持FileReader接口
  21. if(typeof FileReader == 'undefined'){
  22.     result.InnerHTML="<p>你的浏览器不支持FileReader接口！</p>";
  23.     //使选择控件不可操作
  24.     file.setAttribute("disabled","disabled");
  25. } 
  26.  
  27. function readAsDataURL(){
  28.     //检验是否为图像文件
  29.     var file = document.getElementById("file").files[0];
  30.     if(!/image\/\w+/.test(file.type)){
  31.         alert("看清楚，这个需要图片！");
  32.         return false;
  33.     }
  34.     var reader = new FileReader();
  35.     //将文件以Data URL形式读入页面
  36.     reader.readAsDataURL(file);
  37.     reader.onload=function(e){
  38.         var result=document.getElementById("result");
  39.         //显示文件
  40.         result.innerHTML='<img src="' + this.result +'" alt="" />';
  41.     }
  42. } 
  43.  
  44. function readAsBinaryString(){
  45.     var file = document.getElementById("file").files[0];
  46.     var reader = new FileReader();
  47.     //将文件以二进制形式读入页面
  48.     reader.readAsBinaryString(file);
  49.     reader.onload=function(f){
  50.         var result=document.getElementById("result");
  51.         //显示文件
  52.         result.innerHTML=this.result;
  53.     }
  54. } 
  55.  
  56. function readAsText(){
  57.     var file = document.getElementById("file").files[0];
  58.     var reader = new FileReader();
  59.     //将文件以文本形式读入页面
  60.     reader.readAsText(file);
  61.     reader.onload=function(f){
  62.         var result=document.getElementById("result");
  63.         //显示文件
  64.         result.innerHTML=this.result;
  65.     }
  66. } 
  67.  
  68. </script> 
  69.  
  70. </body>
  71. </html>

3 、使用js的FileReader对象实现上传图片时的图片预览功能

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.    <meta  name="viewport"  content="width=device-width,initial-scale=1, user-scalable=no">
  5.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.    <meta name="format-detection" content="telephone=no">
  7.    <title>test</title>
  8.    <script>
  9. 　　　　//选择图片时预览功能
  10. 　　　　function imageshow(source){
  11.                    var file = source.files[0];
  12.                    var imageid = source.id;
  13.                    if (window.FileReader) {
  14.                        var fr = new FileReader();
  15.                        fr.onloadend = function(e) {
  16.                           document.getElementById("portrait"+imageid).src = e.target.result;
  17.                        };
  18.                        fr.readAsDataURL(file);
  19.                   }
  20. 　　　　document.getElementById("image"+imageid).style.display="none";
  21.        document.getElementById("show"+imageid).style.display="block";
  22. 　　    }
  23.   </script>
  24.   </head>
  25. <body>
  26. <div>
  27.       <div id="image1" >
  28. 　　　　　　<p>上传截图</p>
  29.           <input type="file" name="screenshot1" id="1" onchange="imageshow(this)"/>
  30.       </div>
  31. 　　　　<div id="show1" style="display:none;">
  32. 　　　　　　<img  src="" id="portrait1" width="100" height="70">
  33. 　　　　</div>
  34. 　　　　<div id="image2">
  35.           <p>上传截图</p>
  36.           <input type="file" name="screenshot2" id="2" onchange="imageshow(this)"/>
  37.       </div>
  38. 　　　 <div id="show2" style="display:none;">
  39. 　　　　　　<img  src="" id="portrait2" width="100" height="70">
  40. 　　　</div>
  41.          <div id="image3">
  42.             <p>上传截图</p>
  43.             <input type="file" name="screenshot3" id="3" onchange="imageshow(this)"/>
  44.          </div>
  45.     　　<div id="show3" style="display:none;">
  46. 　　　　　　<img  src="" id="portrait3" width="100" height="70" >
  47. 　　　　</div>
  48. </div>
  49. </body>
  50. </html>

方法二：使用window.createObjectURL

直接上代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>图片上传预览</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
  7. </head>
  8. <body>
  9. <form name="form0" id="form0" >
  10. <input type="file" name="file0" id="file0" multiple="multiple" />
  11. <br>
  12. <img src="" width="100" height="100" id="img0" >
  13. </form>
  14. <script>
  15. $("#file0").change(function(){
  16. 　　var objUrl = getObjectURL(this.files[0]) ;
  17. 　　console.log("objUrl = "+objUrl) ;
  18. 　　if (objUrl) {
  19. 　　　　$("#img0").attr("src", objUrl) ;
  20. 　　}
  21. }) ; 
  22.  
  23. //取得该文件的url
  24. function getObjectURL(file) {
  25. 　　var url = null ;
  26. 　　if (window.createObjectURL!=undefined) {
  27. 　　　　url = window.createObjectURL(file) ;
  28. 　　} else if (window.URL!=undefined) {
  29. 　　　　url = window.URL.createObjectURL(file) ;
  30. 　　} else if (window.webkitURL!=undefined) {
  31. 　　　　url = window.webkitURL.createObjectURL(file) ;
  32. 　　}
  33. 　　return url ;
  34. }
  35. </script>
  36. </body>
  37. </html>

参考原文：http://www.cnblogs.com/faith3/p/6371477.html

JavaScript 中的FileReader对象（实现上传图片预览）的更多相关文章

  1. javascript 利用FileReader和滤镜上传图片预览

    FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File或 Blob对象指定要读取的文件或数据. 1.FileReader接口的方法 Fi ...

  2. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  3. 使用FileReader实现前端图片预览

    在FileReader出现之前,前端的图片预览是这样实现的:把本地图片上传到服务器,服务器把图片地址返回,并把它替换到图片元素的src属性. 这种方法的缺点是:必须要先把图片上传到服务器.那么问题来了 ...

  4. JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释，全局对象，隐含的全局概念

    JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html> <body> <script type="t ...

  5. JavaScript中的事件对象

    JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有 ...

  6. JavaScript中创建字典对象（dictionary）实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下 对于JavaScript来说,其自身的Array对象 ...

  7. Javascript学习1 - Javascript中的类型对象

    原文:Javascript学习1 - Javascript中的类型对象 1.1关于Numbers对象. 常用的方法:number.toString() 不用具体介绍,把数字转换为字符串,相应的还有一个 ...

  8. 简单使用JSON,JavaScript中创建 JSON 对象(一)

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...

  9. JavaScript中的window对象

    JavaScript中的window对象:http://www.cnblogs.com/kissdodog/archive/2013/01/01/2841464.html

随机推荐

  1. 新年 flag

    在浮躁的年代本不该如此贪多,奈何鸭梨山大...温故知新吧 GO中文社区 深入学习一两门新的编程语言: -Go编程基础 -Go Web基础 -Go名库讲解 rustlang 中文文档 知乎板块 GO 知 ...

  2. nginx反向代理-解决前端跨域问题

    1.定义 跨域是指a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源.注意:跨域限制访 ...

  3. tex中把参考文献标题删除

    如果是book类<br>\renewcommand\bibname{}<br> 如果是article类<br>\renewcommand\refname{}

  4. JMX的l理解

    一.JMX的一些定义与用途 Java Management Extensions:Java管理扩展,是管理系统和资源之间的一个接口,它定义了管理系统和资源之间交互的标准. 1.专门管理,监控jvm的一 ...

  5. hibernate之Session对象

    Session对象:数据库的核心对象 增删改查 ...java public class UserDao { public void addUser(User user) { //使用hibernat ...

  6. windows系统调试MapReduce程序

    如果使用windows开发mapreduce程序,是不能进行debug的,会报如下错误,但其实不影响最终运行结果 DEBUG o.a.h.u.Shell - Failed to detect a va ...

  7. Django模型层-多表操作

    多表操作 一.创建模型 实例:我们来假定下面这些概念,字段和关系 作者模型:一个作者有姓名和年龄. 作者详细模型:把作者的详情放到详情表,包含生日,手机号,家庭住址等信息.作者详情模型和作者模型之间是 ...

  8. 有了GPRS为什么还要LoRa和NB-IoT？【转】

    转自:https://blog.csdn.net/i_am_Banmei2/article/details/81869724 与其说是GPRS和NB-IoT的比较,不如说是传统网络与新兴网络的比较,我 ...

  9. .NET垃圾回收机制（二）

    一.GC的必要性 1.应用程序对资源操作,通常简单分为以下几个步骤:为对应的资源分配内存 → 初始化内存 → 使用资源 → 清理资源 → 释放内存. 2.应用程序对资源(内存使用)管理的方式,常见的一 ...

  10. 【转载】PHP5.3 配置文件php.ini-development和php.ini-production的区别

    引言 虽然现在PHP版本已经升级至7.*了,由于自己略懒,就在网上找了一篇略谈 php.ini-development 和 php.ini-production 区别的文章,重点是想要最后的那张表. ...