JS+HTML5 FileReader实现文件上传前本地预览功能

  1. 调用FileReader对象的方法

readAsDataURL(file):

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。

JavaScript:

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

readAsText(file,encoding):

HTML5之FileReader的使用

HTML:

eadAsText:该方法有两个参数,其中第二个参数是文本的编码方式,默认值为
UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。
readAsBinaryString:该方法将文件读取为二进制字符串,通常我们将它传送到后端,后端可以通过这段字符串存储文件。
readAsDataURL:这是例子程序中用到的方法,该方法将文件读取为一段以
data: 开头的字符串,这段字符串的实质就是 Data URL,Data
URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html
等格式的文件。

document.getElementById('postFile').onchange = function() {
 var val = this.value;
 var upLoadType = '.jpg,.gif,.bmp,.png';//['.jpg','.gif','.bmp','.png']; //可上传的格式
 var fileExt = val.substr(val.lastIndexOf(".")).toLowerCase(); //从字符串中抽出最后一次出现.之后的字符,并且转换成小写
 var result = upLoadType.indexOf(fileExt); //查找后缀名是否符合条件,如果符合返回>=0,如果不符合则返回负数;
 _alertMsg = $('#error_text');
 var oFReader = new FileReader();
 if (this.files.length === 0) { return; }
 var oFile = this.files[0]; //如果只有一个文件则只需要访问这个FileList对象中的第一个元素.

 if (oFile.size / 1024 < 100) {
  _alertMsg.html("<font style='color:blue'>√</font>").show()
 };
 if (result < 0) {
  _alertMsg.html("请输入正确格式:" + upLoadType).show();
 } else{
  _alertMsg.html("<font style='color:blue'>√</font>").show();
 };

 oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
 oFReader.onload = function (oFREvent) { //当读取操作成功完成时调用.
  document.getElementById("uploadPreview").src = oFREvent.target.result;
 };
};

FileReader 的实例拥有 4 个方法,其中 3
个用以读取文件,另一个用来中断读取。下面的表格列出了这些方法以及他们的参数和功能,需要注意的是
,无论读取成功或失败,方法并不会返回读取结果,这一结果存储在
result属性中。

  通过监听change事件我们可得知用户选择的文件,并且添加了一个files集合,集合中将包含file对象,每个file对象对应着一个文件。并且都有以下只读属性name,size,type,lastModifiedDate.

 下面通过一个上传图片预览和带进度条上传来展示FileReader的使用。

<input type=”file”
name=”file”>
为例,监控onchange事打印它的file对象:

<script type="text/javascript"> 
    function showPreview(source) { 
      var file = source.files[0]; 
      if(window.FileReader) { 
        var fr = new FileReader(); 
        fr.onloadend = function(e) { 
          document.getElementById("portrait").src = e.target.result; 
        }; 
        fr.readAsDataURL(file); 
      } 
    } 
  </script> 


 <input type="file" name="file" onchange="showPreview(this)" /> 
<img id="portrait" src="" width="70" height="75"> 


if(!/image\/\w+/.test(file.type)){ 
  alert("请确保文件为图像类型"); 
  return false; 
}

图片 1

FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法:

使用FileReader做上传预览的例子:

if(window.FileReader) { 
 var fr = new FileReader(); 
 // add your code here 
} 
else { 
 alert("Not supported by your browser!"); 
} 

以上就是本文的全部内容,希望对大家的学习有所帮助。

您可能感兴趣的文章:

  图片 2

  由于读取的过程是异步的,所以FileReader里面有几个事件分别处理不同的情况:progress(是否读取了新数据)、erro(是否发生了错误)、load(是否已经读完了整个文件)。

  由于种种原因无法读取文件就会触发error事件,触发error事件的时会有一个属性code(错误码)保存在FileReader的error属性里面的一个对象中。

  对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input
type=”file”>
标签来上传文件。实现过程是:选取文件的时候value
属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。再获取服务器返回的地址,然后做预览。