JavaScript 中的FileReader对象(实现上传图片预览)

方法一:使用jsFileReader对象

1FileReader对象简介

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> 

</body>

</html>

<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> 

 

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

<!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>

关键词:nbsp gt lt file 文档 读取 filereader result id var

相关推荐:

FileReader获取上传图片的宽高

Html5 js FileReader接口

图片上传预览,兼容IE

FileReader 获取图片BASE64 代码 并预览

h5图片上传预览

使用readAsDataURL方法预览图片

input file 图片上传前预览

利用FileReader实现上传图片前本地预览

图片上传时实现本地预览功能的原理

本地上传图片,实时预览