用FileReader读取input[type=file]中的文件

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


其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果.


对于图像类型的文件,Blob对象的type属性都是以"Image/"开头的,利用这个特性可以判断用户选择的文件是否是图像类型的。



FileReader接口:

主要用来把文件读入内存,并且读取文件中的数据,它提供了一个异步API,使用这个异步API可以在浏览器主线程中异步访问文件系统,读取文件中的数据


1.接口的方法:

它有四个接口的方法,其中三个用来读取文件,另一个用来读取过程中断,无论读取成功或者失败,方法不会返回读取结果,这个结果储存在result属性中。


a.readAsText:该方法有两个参数,第二个参数是文本的编码方式,默认值为UTF-8,即将文件以文本方式读取,读取的结果即是这个文本文件中的内容

b.readAsDataString:这个方法将文件读取为二进制字符串,通常将它传送到后端,后端可以通过这段字符串存储文件

c.readAsDataURL:该方法将文件读取为一串Data URL字符串,事实上是将小文件以一种特殊格式的URL地址形式直接读入页面,这里的小文件通常指的是图像和html等格式的文件。


2.接口的事件:

onabort  数据读取中断时触发

onerror  数据读取出错时触发

onloadstart  数据读取开始时触发

onprogress  数据读取中

onload  数据读取成功完成时触发

onloadend  数据读取完成时触发,无论成功或者失败


3.fileReader方法示例

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};
function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>
<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>
    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>



https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

http://blog.csdn.net/ziy10231207/article/details/51890125


修改时间 2018-01-02

真诚赞赏,手留余香
赞赏
随机推荐
Photoshop创建金属质感文字
通过JS语句判断WEB网站的访问端是电脑还是手机
nginx location 配置返回文本
Apache开启SSL,并代理Node.js的配置文件和80端口的跳转
base64格式图片转换为FormData对象进行上传
20170115 数位板 起步
原生JS判断页面滚动到底部
织梦分页样式
Base64
CentOS 添加 Swap 交换文件