文章泉源：小青年原创
宣布时刻：2016-08-16
关键词：blob，File，FileReader，DataURI，URL
转载需标注本文原始地点: http://zhaomenghuan.github.io…
写在前面
这段时刻一向有朋侪在问文件上传下载的事，搜一下论坛发明相干的题目不少，然则不够体系，本着为群众效劳的立场本文试着将一些题目整顿一下，争取用初学者能够更明白的去处置惩罚相干的题目。文件上传是开辟中绕不过的一个坎儿，关于许多没有经验的人来讲，几乎懵逼，现在我所晓得的上传体式格局有下面这几种：
- 传统flash上传
- 隐蔽iframe框上传
- 表单数据提交
- HTML5的新东西——File API
本文限于篇幅先引见末了一种运用html5 File API举行文件上传的相干细节。
历史上，JavaScript没法处置惩罚二进制数据。假如一定要处置惩罚的话，只能运用charCodeAt()要领，一个个字节地从笔墨编码转成二进制数据，另有一种方法是将二进制数据转成Base64编码，再举行处置惩罚。这两种要领不仅速度慢，而且轻易失足。ECMAScript 5引入了Blob对象，许可直接操纵二进制数据。Blob对象是一个代表二进制数据的基础对象，在它的基础上，又衍生出一系列相干的API，用来操纵文件。
File API
File 接口供应了文件的信息，以及文件内容的存取要领。
File对象能够用来猎取某个文件的信息，还能够用来读取这个文件的内容。通常状况下，File对象是来自用户在一个<input>元素上挑选文件后返回的FileList对象,也能够是来自由拖放操纵天生的 DataTransfer对象.
经由过程input file标签挑选文件
默许的input file标签比较丢脸，须要本身革新，平常无非是将input file设置宽高，然后运用overflow: hidden;将过剩的部份隐蔽，在上面再盖一个美化的按钮或许提醒语，以下图：
浏览器原生的效果：
经由美化的效果：
代码以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.filePicker{
width: 160px;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
background: #00b7ee;
}
.filePicker input[type="file"] {
position: relative;
top: -44px;
left: 0px;
width: 160px;
height: 44px;
opacity: 0;
cursor: pointer;
overflow: hidden;
z-index: 0;
}
.container{
width: 160px;
margin: 30px auto;
}
</style>
</head>
<body>
<div class="container">
<input type="file" name="" id="" value="" />
</div>
<div class="container">
<div class="filePicker">
<label>点击挑选文件</label>
<input id="fileInput" type="file" name="file" multiple="multiple" accept="image/*">
</div>
</div>
</body>
</html>我们能够经由过程给input file标签设置accept属性举行文件挑选过滤，该属性的值必须为一个逗号支解的列表,包含了多个唯一的内容范例声明：
- 以 STOP 字符 (U+002E) 最先的文件扩展名。（比方：”.jpg,.png,.doc”）
- 一个有用的 MIME 范例，但没有扩展名
- audio/* 示意音频文件 HTML5
- video/* 示意视频文件 HTML5
- image/* 示意图片文件
设置multiple属性能够举行设置为多选。
设置capture属性能够举行设置翻开摄像照相或许录相。
Capture Image:
<input type="file" accept="image/*" capture="camera">
Capture Audio:
<input type="file" accept="audio/*" capture="microphone">
Capture Video:
<input type="file" accept="video/*" capture="camcorder"> multiple属性和capture属性不能同时见效。
经由过程File API,我们能够在用户拔取一个或许多个文件以后,接见到代表了所选文件的一个或多个File对象，这些对象被包含在一个FileList对象中。一切type属性(attribute)为file的<input>元素都有一个files属性，用来存储用户所挑选的文件。files有一个length属性和item要领，我们能够经由过程files[index]或许files.item(index)猎取我们挑选的file对象。能够经由过程change事宜监听input file输入完成事宜：
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener('change', function(event) {
var file = fileInput.files[0];
// 或file = fileInput.files.item(0);
console.log(file);
}, false);File API供应File对象，它是FileList对象的成员，包含了文件的一些元信息，比方文件名、上次修正时刻、文件大小和文件范例。下图能够File对象的属性：
- lastModifiedDate：文件对象末了修正的日期
- name：文件名,只读字符串,不包含任何途径信息.
- size：文件大小,单元为字节,只读的64位整数.
- type：MIME范例,只读字符串,假如范例未知,则返回空字符串.
比方：我们能够依据size换算出我们习气的文件大小表达体式格局：
/**
* 读文件大小
* @param {Object} file
*/
function readFileSize(file){
var size = file.size / 1024;
var aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
var fileSizeString = '';
for(var i = 0; size > 1; size /= 1024, i++) {
fileSizeString = size.toFixed(2) + " " + aMultiples[i];
}
return fileSizeString;
}有时刻我们愿望限定用户上传的文件大小，能够经由过程这个要领先做推断。同时我们能够经由过程type属性推断用户的文件范例，然则这类要领不可靠，因为用户能够经由过程转变后缀名完成。
许多新手希图经由过程input file标签取得文件完全途径，因为浏览器平安机制，这个是不被许可的，然则有时刻我们愿望挑选完图片预览一下图片，这个时刻我们就能够用FileReader API完成。
经由过程拖放操纵挑选文件
预览效果：
代码完成：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dropbox{
width: 300px;
height: 300px;
margin: 20px;
border: 3px dashed #e6e6e6;
}
.area{
margin: 100px auto;
width: 100px;
height: 100px;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABLCAIAAAB7tddWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1Q0VBNzA0MjEyMDUxMUUzODk2Q0JFM0Q1RjE4QkExQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1Q0VBNzA0MzEyMDUxMUUzODk2Q0JFM0Q1RjE4QkExQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNDA2MkY1MTIwMzExRTM4OTZDQkUzRDVGMThCQTFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNDA2MkY2MTIwMzExRTM4OTZDQkUzRDVGMThCQTFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+K6izdgAAAvpJREFUeNrsnFmPqkAQhWmX667gEp9c/v+/MkSDG+4LrvdcSYgRbw/0ALZQ9WBUJOn+uqvqHGCG3e93hUJRUoSAQBAIAkEgCASBIBAE4neRicEcII51Xb/dbnjPGOt0OqlUKok7ApN3jIKwY6DUIBAEgkAQCALho/X47TeXy8U0TcuyrtdrZKPs9/v2m8FgINYgf9QX/gTV+Xw2DCNKBJKmxmKxsAVc0kEcDgfyGq8CNp/Pa5qWy+WiHG6v13v7/XPt6Ha7Al5D3HQ1Go1sNkvtU8lkMsmtESSoCASBSFqEW/DQ0tbr9W63O51OKK6FQkFV1XQ6nSwQ0OOTyQSvjknZbDaA0mq1QCQafSFFasxmM4eCE1Do0+lUQrcSFggsPhzq20NgsVqtkpIax+MxMs+C/aXruvMxaonND75J9W5hUWWxuYAVdRfTg8EplUphGJywQPAFuBd5Dlhw/aDwwgVtCDgCdzph1QisG+dosVjkn44WYxjGC4XnvBuNRtvt9gtA2Hv47SGsZKVS4ef8eDzG4vMVCrpSgEU3xPbZbDar1erLl1AQ7XabU8xAAXvB3XffBnIHwkR2QcUYq9fr5XIZOxkTg6BEkeNLKdQF7AWPFBy1AoUmu8RG/HmE91nxM+J/ORIr07VcLvf7feCt+stAQGIBRNJtOJolDAhdj/hXGj5+u+TzIKAF+MbkK00XFta2BhDRUE0/9gv8Elogbu4TBW8+nyPhHSeuaVqtVuNQC6TzyQUCXsg0TbfyAxfIKogr9ynP1GJyYQZ57qbg7AuIRfclKZwSlDqWBQSmxM9zFALYh+fFBwJJSkNgqeFxSrAPw+EQ9QJew7Is2Sj8FgSW2nu1gylYPkKRMsRTA+4IcjA2fxsnDkLOq/IfACFP54uP1yAQBIJAEIh4gWCPkHk+GJ7AjU/fICJ+qlIghEfoDwQMtRjvyLYDRih4rsDT+bBM9tP5kuhrzN++e6SqqvCdYUb/SIO6BoEgEASCQBAIAkEgCEQg8VeAAQAB1bbO2qoeewAAAABJRU5ErkJggg==");
}
#preview img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="dropbox" class="dropbox">
<div class="area"></div>
</div>
<div id="preview"></div>
<script type="text/javascript">
var dropbox = document.getElementById("dropbox");
var preview = document.getElementById("preview");
dropbox.addEventListener("dragenter", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("dragover", function(e){
e.stopPropagation();
e.preventDefault();
}, false);
dropbox.addEventListener("drop", function(e){
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if ( !imageType.test(file.type) ) {
continue;
}
// 添补挑选的图片到展现区
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img);
// 读取File对象中的内容
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}, false);
</script>
</body>
</html>在这个例子中，ID 为 dropbox 的元素地点的地区是我们的拖放目标地区。我们须要在该元素上绑定 dragenter，dragover，和drop 事宜。我们必须阻挠dragenter和dragover事宜的默许行动，如许才触发 drop 事宜。我们从drop 事宜对象中猎取到dataTransfer对象，这个对象包含Filelist对象。
FileReader API
运用FileReader对象,web运用顺序能够异步的读取存储在用户盘算机上的文件(或许原始数据缓冲)内容,能够运用File对象或许Blob对象来指定所要处置惩罚的文件或数据.个中File对象能够是来自用户在一个<input>元素上挑选文件后返回的FileList对象,也能够来自拖放操纵天生的 DataTransfer对象,还能够是来自由一个HTMLCanvasElement上实行mozGetAsFile()要领后的返回效果。
DataURI对象
在上面经由过程拖放操纵挑选文件的例子中，我们运用了”data:image/png;base64,xxxxxxxxxxxxx”这类情势的字符串作为背景，而不是图片，挑选的图片展现也是运用这类情势。这类字符串叫做DataURI对象，许可将一个小文件举行编码后嵌入到别的一个文档里，花样为：
data:[<MIME type>][;charset=<charset>][;base64],<encoded data>团体能够视为三部份，即声明：参数+数据，逗号左侧的是种种参数，右侧的是数据。
URL是uniform resource locator的缩写，在web中的每个可接见资本都有一个URL地点，比方图片，HTML文件，js文件以及style sheet文件，我们能够经由过程这个地点去download这个资本。实在URL是URI的子集，URI是uniform resource identifier的缩写。URI是用于猎取资本，包含其附加的信息的一种协定。附加信息多是地点，也能够不是地点，假如是地点，那末这时候URI就变成URL了。注重的是data URI不是URL，因为它并不包含资本的大众地点。
我们能够经由过程FileReader 的readAsDataURL要领取得：
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsDataURL(file);有时刻我们须要将DataURI对象转blob对象：
/**
* dataURI 转 blob
* @param {Object} dataURI
*/
function dataURItoBlob(dataURI) {
var arr = dataURI.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});
}URL对象
我们除了能够运用base64字符串作为内容的DataURI将一个文件嵌入到别的一个文档里，还能够运用URL对象。URL对象用于天生指向File对象或Blob对象的URL。
window.URL.createObjectURL
静态要领会建立一个 DOMString，它的 URL 示意参数中的对象。这个 URL 的生命周期和建立它的窗口中的 document 绑定。这个新的URL 对象示意着指定的 File 对象或许 Blob 对象。
var objecturl = window.URL.createObjectURL(file);window.URL.revokeObjectURL
静态要领用来开释一个之前经由过程挪用 window.URL.createObjectURL() 建立的已存在的 URL 对象。当你完毕运用某个 URL 对象时，应当经由过程挪用这个要领来让浏览器晓得不再须要坚持这个文件的引用了。
window.URL.revokeObjectURL(objecturl)比方：运用对象URL来显现图片：
window.URL = window.URL || window.webkitURL;
var img = document.createElement("img");
img.src = window.URL.createObjectURL(blob);
img.height = 60;
img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
}
document.body.appendChild(img);FileReader API详解
状况常量
- EMPTY：值为0，还没有加载任何数据;
- LOADING：值为1，数据正在被加载;
- DONE：值为2，已完成悉数的读取要求。
属性
- error：在读取文件时发作的毛病， 只读;
- readyState：表明FileReader对象的当前状况，值为State constants中的一个，只读；
- result：取到的文件内容，这个属性只在读取操纵完成以后才有用,而且数据的花样取决于读取操纵是由哪一个要领提议的，只读。
要领
- abort()：中断该读取操纵.在返回时,readyState属性的值为DONE.
- readAsArrayBuffer()：最先读取指定的Blob对象或File对象中的内容. 当读取操纵完成时,readyState属性的值会成为DONE,假如设置了onloadend事宜处置惩罚顺序,则挪用之.同时,result属性中将包含一个ArrayBuffer对象以示意所读取文件的内容.
- readAsBinaryString()：最先读取指定的Blob对象或File对象中的内容. 当读取操纵完成时,readyState属性的值会成为DONE,假如设置了onloadend事宜处置惩罚顺序,则挪用之.同时,result属性中将包含所读取文件的原始二进制数据.
- readAsDataURL()：最先读取指定的Blob对象或File对象中的内容. 当读取操纵完成时,readyState属性的值会成为DONE,假如设置了onloadend事宜处置惩罚顺序,则挪用之.同时,result属性中将包含一个data: URL花样的字符串以示意所读取文件的内容.
- readAsText()：最先读取指定的Blob对象或File对象中的内容. 当读取操纵完成时,readyState属性的值会成为DONE,假如设置了onloadend事宜处置惩罚顺序,则挪用之.同时,result属性中将包含一个字符串以示意所读取的文件内容.
事宜处置惩罚
- onabort：当读取操纵被中断时挪用.
- onerror：当读取操纵发作毛病时挪用.
- onload：当读取操纵胜利完成时挪用.
- onloadend：当读取操纵完成时挪用,不管是胜利照样失利.该处置惩罚顺序在onload或许onerror以后挪用.
- onloadstart：当读取操纵将要最先之前挪用.
- onprogress：在读取数据过程当中周期性挪用.
上传实例：以二进制流上传文件
var fileInput = document.getElementById("fileInput");
fileInput.addEventListener('change', function(event) {
var file = fileInput.files[0];
if (file) {
var reader = new FileReader();
var xhr = new XMLHttpRequest();
xhr.onprogress=function(e){
var percentage = Math.round((e.loaded * 100) / e.total);
console.log("percentage:"+percentage);
}
xhr.onload=function(e){
console.log("percentage:100");
}
xhr.open("POST", "这里填写效劳器地点");
reader.onload = function(evt) {
xhr.send(evt.target.result);
};
reader.readAsBinaryString(file);
}
}); blob 二进制大对象
BLOB (binary large object)，二进制大对象，是一个能够存储二进制文件的容器。
建立Blob对象的要领有几种，能够挪用Blob组织函数，还能够运用一个已有Blob对象上的slice()要领切出另一个Blob对象，还能够挪用canvas对象上的toBlob要领。
第一次见到这个词是半年之前，那个时刻竟然没有听过blob，然后上网查了一下，巴拉巴拉一大堆，当时是不明白的。
看了前面的一系列API和对象，或许许多同砚最先晕了，然则在一最先说到的blob对象，我们一向没有提到，假如本文不说起，明显是不合理的。毕竟作为File对象的爸爸，blob劳而无功。上述的FileReader对象也能够操纵blob对象。
Blob对象有两个只读属性：
- size：二进制数据的大小，单元为字节。
- type：二进制数据的MIME范例，悉数为小写，假如范例未知，则该值为空字符串。
在Ajax操纵中，假如xhr.responseType设为blob，吸收的就是二进制数据。
Blob 组织函数天生blob对象
Blob组织函数，接收两个参数。第一个参数是一个包含现实数据的数组，第二个参数是数据的范例，这两个参数都不是必须的。数组元素能够是恣意多个的ArrayBuffer，ArrayBufferView (typed array)， Blob，或许 DOMString对象。
比方：
var arr = ['<h1>hello world</h1>'];
var blob = new Blob(arr, { "type" : "text/xml" }); // the blob
console.log(blob);效果以下：
用JS在浏览器中建立下载文件
前端许多项目中，都有文件下载的需求，特别是JS天生文件内容，然后让浏览器实行下载操纵（比方在线图片编辑、在线代码编辑、iPresst等）但受限于浏览器，许多状况下我们都只能给出个链接，让用户点击翻开-》另存为。以下面这个链接：
<a href="file.js">file.js</a>用户点击这个链接的时刻，浏览器会翻开并显现链接指向的文件内容，明显，这并没有完成我们的需求。HTML5中给a标签增加了一个download属性，只需有这个属性，点击这个链接时浏览器就不在翻开链接指向的文件，而是改成下载（现在只要chrome、firefox和opera支撑）。下载时会直接运用链接的名字来作为文件名，然则是能够改的，只需给download加上想要的文件名即可，如：download="not-a-file.js"。然则如许还不够，以上的要领只合适用在文件是在效劳器上的状况。假如在浏览器端js天生的内容，想让浏览器举行下载要怎样办到呢？DataURI能够完成这个效果，然则DataURI的文件范例被限定了，我们这里能够变通一下完成blob对象。
<a id="aLink">下载</a>
<script type="text/javascript">
function downloadFile (el, fileName, content) {
var aLink = document.querySelector(el);
var blob = new Blob([content]);
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
}
document.querySelector('#aLink').addEventListener('click',function () {
downloadFile('#aLink', 'hello.txt', '<h1>hello world</h1>');
})
</script>Blob对象的slice要领天生blob对象
Blob对象的slice要领，将二进制数据根据字节分块，返回一个新的Blob对象。
var newBlob = oldBlob.slice(startingByte, endindByte);下面是一个运用XMLHttpRequest对象，将大文件支解上传的例子。
function upload(blobOrFile) {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server', true);
xhr.onload = function(e) { ... };
xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
var blob = this.files[0];
const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
const SIZE = blob.size;
var start = 0;
var end = BYTES_PER_CHUNK;
while(start < SIZE) {
upload(blob.slice(start, end));
start = end;
end = start + BYTES_PER_CHUNK;
}
}, false);参考文档
在web运用中运用文件
DataURI详解
文件和二进制数据的操纵
明白DOMString、Document、FormData、Blob、File、ArrayBuffer数据范例
用JS在浏览器中建立下载文件
写文章不轻易，或许写这些代码就几分钟的事，写一篇大家好接收的文章或许须要几天的酝酿，然后加上几天的码字，累并快乐着。假如文章对您有协助请我喝杯咖啡吧！
