FileReader和URL.createObjectURL(file)

FileReader

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

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

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

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

 

2. 调用FileReader对象的方法 

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

方法名	参数	描述
abort	none	中断读取
readAsBinaryString	file	将文件读取为二进制码
readAsDataURL	file	将文件读取为 DataURL
readAsText	file, [encoding]	将文件读取为文本

3. FileReader处理事件简介

FileReader 包含了一套完整的事件模型，用于捕获读取文件时的状态，下面这个表格归纳了这些事件。

事件	描述
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	读取中

文件一旦开始读取，无论成功或失败，方法并不会返回读取结果，这一结果(储存在result属性中)要用FileReader处理事件去获取。

fileReader.onload = function() { 
    this.result; 
}; 

 

代码示例

1. readAsDataURL：上传图片并预览。

<script type="text/javascript">
    function uploadFile(){
            var file = document.getElementById("file").files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload=function(e){
                document.getElementById("portrait").src = e.target.result;
            }
        }
</script>
 
<label>请选择一个文件：</label>
<input type="file" name="file" onchange="showPreview(this)" />
<img id="portrait" src="" width="70" height="75">

 

 如果要限定上传文件的类型，可以通过文件选择器获取文件对象并通过type属性来检查文件类型。

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

 

2. 上传文件并回显文件内容

<script>
    function uploadFile(){
        var file = document.getElementById("file").files[0];
        var reader = new FileReader();
        reader.readAsText(file);
        reader.onload=function(e){
            document.getElementById("text").innerHTML = this.result;
        }
    }
</script>
<label>请选择一个文件：</label>
<input type="file" id="file" onchange="uploadFile()" multiple />
<div id="text">文件</div>

 

URL.createObjectURL(file)

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

图片上传并预览。 

<script>
    function uploadFile(){
        var file = document.getElementById("file").files[0];
        // 图片预览
        document.getElementById("portrait").src = window.URL.createObjectURL(file);
    }
</script>
<label>请选择一个文件：</label>
<input type="file" id="file" onchange="uploadFile()" multiple />
<img id="portrait" src="" width="70" height="75">