HTML5 File API

luoye 2021年05月25日编程语言 400 0

HTML5 引入了一个 File API 用以提供用户上传文件的信息，并允许网页中的 JavaScript 访问其内容。

以下是一些表单 file 控件：

<input type="file" accept="video/*;capture=camcorder"> 
<input type="file" accept="audio/*;capture=microphone"> 
<input type="file" accept="image/*;capture=camera">直接调用相机（测试安卓可以，iphone还是有相册） 
<input type="file" accept="image/*" />调用相机 图片或者相册 
<input type="file" multiple accept="image/*" />调用相册

1 FileList 对象

FileList 对象针对表单的 file 控件。当用户通过 file 控件选取文件后，这个控件的 files 属性值就是 FileList 对象。

// 多选控件

<input type='file' multiple /> 
<script> 
document.querySelector('input').onchange = function() { 
console.log(this.files); 
 
}; 
</script>

控制台输出：

FileList {0: File, 1: File, length: 2} 
0: File 
1: File 
length:2 
__proto__: Object

除了用 file 控件，采用拖放方式，也可以得到 FileList 对象。

<textarea></textarea> 
<script> 
  var ipt = document.querySelector('textarea'); 
  ipt.ondragover = function () { return false; }; 
 
  // Add drop handler 
  ipt.ondrop = function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    e = e || window.event; 
    var files = e.dataTransfer.files; 
 
    console.log(files); 
  }; 
</script>

选中两个文件拖放到文本框中，打印结果和上面一致。
一般来说，我们不可能手动构造 FileList 对象，只能被动地读取，也就是说只有用户主动触发了文件读取行为，js 才能访问到 FileList，而这通常发生在表单选择文件或者拖拽文件中。

2 File 对象

我们看到一个 FileList 对象包含了我们选中的 File 对象，那么一个 File 又有哪些属性呢？我们可以打印出来看看。

name：文件名，该属性只读。
size：文件大小，单位为字节，该属性只读。
type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
lastModified：文件的上次修改时间，格式为时间戳。
lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例。

3 Blob 对象

上图中我们看到，File 对象是继承自 Blob 对象的，Blob 又是什么鬼？

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的 API（比如 File 对象），都是建立在 Blob 对象基础上的，继承了它的属性和方法。

生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

（1）Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。

var a = ["hello", "world"]; 
var myBlob = new Blob(a, { "type" : "text/xml" }); 
console.log(myBlob);

（2）Blob 对象的 slice 方法，将二进制数据按照字节分块，返回一个新的 Blob 对象。

var a = ["hello", "world"]; 
var myBlob = new Blob(a, { "type" : "text/xml" }); 
var newBlob = myBlob.slice(0, 5); 
console.log(newBlob);

Blob 对象有两个只读属性：

size：二进制数据的大小，单位为字节。（文件上传时可以在前端判断文件大小是否合适）
type：二进制数据的 MIME 类型，全部为小写，如果类型未知，则该值为空字符串。（文件上传时可以在前端判断文件类型是否合适）

4FileReader

重头戏来了，FileReader API 才是我们接下去完成一些任务的关键。

FileReader API 用于读取文件，即把文件内容读入内存。它的参数是 File 对象或 Blob 对象。

对于不同类型的文件，FileReader 提供不同的方法读取文件。

~~readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。~~（已废弃）
readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是 UTF-8，可以通过可选的格式参数，指定其他编码格式的文本。
readAsDataURL(Blob|File)：返回一个基于 Base64 编码的 data-uri 对象。
readAsArrayBuffer(Blob|File)：返回一个 ArrayBuffer 对象。

除了以上四种不同的读取文件方法，FileReader API 还有一个 abort 方法，用于中止文件上传。

var reader = new FileReader(); 
reader.abort();

FileReader 对象采用异步方式读取文件，可以为一系列事件指定回调函数。

onabort 方法：读取中断或调用 reader.abort() 方法时触发。
onerror 方法：读取出错时触发。
onload 方法：读取成功后触发。
onloadend 方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
onloadstart 方法：读取将要开始时触发。
onprogress 方法：读取过程中周期性触发。（可以用来获取文件读取的进度）

以前在学习图片的 base64 编码的时候，写了一篇文章获取图片 base64 编码的几种方法，

当时还没有学习 File API，了解到 File API 也能做类似的事情，现在学到了，

写了个简单的 demo IT虾米网，不仅能获取图片的 base64 编码，

同时也能获取文字的 base64 编码。

<title>获取图片 base64 编码</title> 
<meta charset="utf-8"> 
<style> 
  textarea { 
    width: 100%; 
    height: 200px; 
    margin-top: 10px; 
  } 
</style> 
<body> 
<h1>上传图片或者拖动图片到框内获取图片 base64 编码</h1> 
<input type='file' multiple /><br/> 
<textarea></textarea> 
<script> 
  document.querySelector('input').onchange = function() { 
    var reader = new FileReader(); 
    reader.onload = function() { 
      var dataURL = reader.result; 
      document.querySelector('textarea').innerHTML = dataURL; 
    }; 
    reader.readAsDataURL(this.files[0]); 
  }; 
  // drag & drop 
  var ipt = document.querySelector('textarea'); 
  ipt.ondragover = function () { return false; }; 
  // Add drop handler 
  ipt.ondrop = function(e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    e = e || window.event; 
    var files = e.dataTransfer.files; 
    var reader = new FileReader(); 
    reader.onload = function() { 
      var dataURL = reader.result; 
      document.querySelector('textarea').innerHTML = dataURL; 
    }; 
    reader.readAsDataURL(files[0]); 
  }; 
</script> 
</body>

获取到了文件的 base64 编码，做一些诸如图片预览的功能，也就手到擒来了，有兴趣的可以自己尝试下，

类似的还有文字预览啊，等等。

5 URL

你以为 File API 就这样了吗？非也，还有个强大的东西没有介绍，URL 对象！

调用 URL 对象的 createObjectURL 方法，传入一个 File 对象或者 Blob 对象，能生成一个链接，听起来好像很吊的样子。

var objecturl =  window.URL.createObjectURL(blob);

上面的代码会对二进制数据生成一个 URL，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。

这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。

window.URL.revokeObjectURL(objectURL);

举个简单的例子。

var blob = new Blob(["Hello hanzichi"]); 
var a = document.createElement("a"); 
a.href = window.URL.createObjectURL(blob); 
a.download = "a.txt"; 
a.textContent = "Download"; 
 
document.body.appendChild(a);

页面上生成了一个超链接，点击它就能下载一个名为 a.txt 的文件，里面的内容是 Hello hanzichi。

这里插点题外话，简单介绍下 H5 新增的 download 属性。

是否支持download属性的监测
要监测当前浏览器是否支持download属性，一行JS代码就可以了，如下：

var isSupportDownload = 'download' in document.createElement('a');

对于一些诸如 exe，rar 等浏览器不能直接打开的文件类型，我们一般可以直接用一个 a 标签，将其指向文件在服务端的地址，点击即可下载。但是如果是一些浏览器能直接打开的文件，比如 txt，js 等，如果这样设置一个超链接，点击会直接打开文件，一般我们可以配合后端实现，比如用 PHP。

$file_name = "1.txt"; // 下载文件名 
$file_dir = dirname(__FILE__). '/'; //下载文件存放目录 
//输入文件标签 
Header("Content-type: text/plain"); 
Header("Content-Disposition: attachment; filename=" . $file_name );

以上代码需要文件的 Content-type 属性值，安利一个网址，IT虾米网，各种文件类型的 Content-type 属性值一网打尽！

如果考虑到安全性，header + fread 可能会显得更严谨。

$file_name = "1.txt"; // 下载文件名 
$file_dir = dirname(__FILE__). '/'; //下载文件存放目录 
 
Header("Content-type: text/plain"); 
Header("Content-Disposition: attachment; filename=" . $file_name ); 
echo fread($file, filesize($file_dir . $file_name));

但是现在我们只需要在 a 标签上加上 download ！

<a href="1.txt" download>download txt></a>

还可以给 download 加上属性值，即为下载的文件名。

<a href="1.txt" download="2.txt">download txt></a>

可以省略 .txt 的后缀名，浏览器会自行判断。

我们再回到 URL 上来。对于 File 或者 Blob 对象，我们可以这样理解，它们的存在，依赖于页面，而 URL 能给这些 "转瞬即逝" 的二进制对象一个临时的指向地址。

这个临时的地址还有什么用呢？也能做图片预览，相比前面用 readAsDataURL 的实现，更简单了。

<input type='file' multiple /><br/> 
<img /> 
<script> 
document.querySelector("input").onchange = function() { 
  var files = this.files; 
  document.querySelector("img").src = window.URL.createObjectURL(files[0]); 
} 
</script>

比如还有这样的需求，前端上传文件，要动态生成该文件的下载链接，也能用 URL 完成。

6 onprogress 事件

想要上传图片的时候显示进度条，就要使用上 HTML5 中的 onprogress 事件了。
onprogress 事件可以作用于 <video> 或 <audio> 标签中，作为其状态回调函数的作用。
也可以是作为 XMLHttpRequest 的指定事件，XMLHttpRequest 对象，传送数据的时候，有一个 progress 事件，用来返回进度信息。
它分成上传和下载两种情况：

下载的 progress 事件属于 XMLHttpRequest 对象
上传的 progress 事件属于 XMLHttpRequest.upload 对象
当上传或下载时，会频繁调用该方法。该方法接受一个事件参数 event，其中 event.total 是需要传输的总字节，event.loaded 是已经传输的字节。如果event.lengthComputable 不为真，则 event.total 等于 0。

例子代码：

function uploadFile1(file,desc,catid){ 
var $process = $("#process_"+file.size); 
var formData = new FormData(); //以下为像后台提交图片数据 
formData .append('img_url', file); 
formData .append('img_desc',desc); 
formData .append('cat_id',catid); 
var xhr=new XMLHttpRequest(); 
xhr.open('post','shop_gallery.php?act=update',true); 
xhr.onreadystatechange=function (){ 
if(this.readyState==4){ 
$process.css("width","0%"); 
if (!(img_url.length == 0)) { 
img_desc.splice(0, 1); 
uploadFile1(img_url[0],img_desc[0],catid); 
} 
} 
} 
xhr.upload.onprogress=function (ev){ 
if(ev.lengthComputable){ 
var precent=100 * ev.loaded/ev.total; 
$process.css("width",precent+'%'); 
if (precent == 100){ 
delimg1($process); 
if (img_url.length == 0){ 
setTimeout("refresh("+catid+")", 1000 ); 
} 
} 
} 
} 
//  
xhr.send(formData); 
}

7 Canvas & dataURL & Blob

canvas 中有 toDataURL 函数，可以将 canvas 转为 dataURL 形式的 base64 编码，而 Blob 也可以转为 dataURL，这三者之间是否可以互相转换？有没有什么实用之处？

（1）canvas -> dataURL

用 toDataURL 方法，比较简单，不多说。

（2）blob -> dataURL

用 FileReader 的 readAsDataURL 方法，使用方式可以看

（3）dataURL -> blob

这个函数有点屌

function dataURLtoBlob(dataurl) { 
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], 
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); 
  while(n--){ 
    u8arr[n] = bstr.charCodeAt(n); 
  } 
  return new Blob([u8arr], {type:mime}); 
}

（4）dataURL - canvas

将 image 的 src 属性置为 dataURL，再用 drawImage 方法画上去。

（5）blob - canvas

如何把二进制形式的图片画上 canvas？先用 readAsDataURL 转为 dataURL，接着就是（4）的事情了。

（6）canvas - blob

canvas 转为 blob 也可以用 dataURL 做跳板，先将 canvas 转为 dataURL（1），再用 dataURL 转为 blob（3）。

利用它们之间的转换可以做些什么好玩的事呢？比如可以上传图片，对图片做各种处理，然后保存。

canvas 有原生的 toBlob 方法，使得图片文件可以被缓存或保存到本地。

File API 还能实现很多炫酷的功能，比如查看文件读取的进度（onprogress ），分割文件，分段读取文件，还能配合 ajax 使用，有兴趣的可以参考以下文献自行研究。

文件和二进制数据的操作（本文大量参考或者直接引用了阮老师的这篇文章内容，不得不说阮老师的 tutorial 写的真的非常的好，老少皆宜）
通过 File API 使用 JavaScript 读取文件
Using files from web applications
HTML5 读取本地文件 File Api 使用
FileAPI w3
了解 HTML/HTML5 中的 download 属性
在浏览器端用 JS 创建和下载文件
DataURL 与 File,Blob,canvas 对象之间的互相转换的 Javascript

IT序号网 HTML5

微信公众号号：IT虾米（左侧二维码扫一扫）欢迎添加！

Q : 823053937

热贴推荐

HTML5 File API

1 FileList 对象

2 File 对象

3 Blob 对象

4FileReader

5 URL

6 onprogress 事件

7 Canvas & dataURL & Blob

Read more

Q : 823053937

热贴推荐

HTML5 File API

1 FileList 对象

2 File 对象

3 Blob 对象

4FileReader

5 URL

6 onprogress 事件

7 Canvas & dataURL & Blob

Read more

公寓列表的 HTML5 标签和微数据

angularjs之在angular js项目中强制更新html5视频源

ionic-framework之如何在ionic项目中使用fabric js(html5-Canvas库)自定义构建

html之检测HTML5段落结尾-与HTML序列化相关

iphone之是否可以通过Apple Store分发HTML5 iPhone应用程序

AngularJS $locationProvider.html5Mode 不能在本地主机上工作

html5-video之IE10使用video>标签不播放视频，直接请求视频播放

asp.net之Angularjs html5Mode页面刷新打破了asp.net mvc中的路由

html5-video之video.js 响应不工作

html5-appcache之HTML5 缓存 list : Fallback for external resources

wysihtml5 编辑器之如何简单地向元素添加类

html5-video之如何在 HTML5(和 Reveal.js)中使用视频字幕