File 接口提供有關(guān)文件的信息，并允許網(wǎng)頁中的JavaScript訪問其內(nèi)容。
File對象可以用來獲取某個(gè)文件的信息，還可以用來讀取這個(gè)文件的內(nèi)容。通常情況下，F(xiàn)ile對象是來自用戶在一個(gè)<input>元素上選擇文件后返回的FileList對象，也可以是來自由拖放操作生成的 DataTransfer對象。
用戶在選擇一個(gè)或者多個(gè)文件后，可以通過File API訪問這些File對象，這些對象被包含在一個(gè)FileList對象中。所有type為file的input都有一個(gè)files屬性，通過Element.files可以返回FileList對象。
<body> <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*"> <script> var fileInput = document.querySelector("#fileInput"); fileInput.addEventListener("change", function (event) { var file = fileInput.files[0]; console.log(fileInput.files) }, false) </script></body>?
?files有一個(gè)length屬性和item方法，可以通過files[index]或者files.item(index)獲取我們選擇的file對象。每個(gè)File對象中包含了文件的一些詳細(xì)信息：
?
根據(jù)size屬性換算為我們習(xí)慣的文件大小單位：
function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, sizes = ['B','KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; // Math.log() 返回?cái)?shù)字的自然對數(shù) log(b)/log(a)=loga(b)) 換底公式 log以a為底b的對數(shù) // Math.floor(x) -- 向下取整，返回小于或等于x的值 // Math.pow(x,y) -- 返回以x的y次冪，等同于x^y的數(shù)值表達(dá)式 var i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toFixed(1) + ' ' + sizes[i];}FileReader 對象允許Web應(yīng)用程序異步讀取存儲在用戶計(jì)算機(jī)上的文件（或原始數(shù)據(jù)緩沖區(qū)）的內(nèi)容，使用 File 或 Blob 對象指定要讀取的文件或數(shù)據(jù)
其中File對象可以是來自用戶在一個(gè)元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個(gè)HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后返回結(jié)果
DataURI對象
先來看一個(gè)例子：
<body> <div id="dropbox" class="dropbox"> <div class="area">拖動(dòng)圖片到這里</div> </div> <div id="preview"></div> <script type="text/javascript"> var dropbox = document.querySelector("#dropbox"); var preview = document.querySelector("#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 = new RegExp("^image\/"); if (!imageType.test(file.type)) continue; // 填充選擇的圖片到展示區(qū) var img = document.createElement("img"); img.classList.add("obj"); img.file = file; preview.appendChild(img); // 讀取File對象中的內(nèi)容 var reader = new FileReader(); reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } }, false); </script></body>?
在上面的例子中，預(yù)覽圖片的src使用了”data:image/png;base64,xxxxxxxxxxxxx”這種形式的字符串（base64），這種字符串叫做DataURI對象，允許將一個(gè)小文件進(jìn)行編碼后嵌入到另外一個(gè)文檔里，格式為：
data:[<MIME type>][;charset=<charset>][;base64],<encoded data>這個(gè)字符串可以分為三部分，即聲明：參數(shù)+數(shù)據(jù)，逗號左邊的是各種參數(shù)，右邊的是數(shù)據(jù)。
我們可以通過FileReader 的readAsDataURL方法獲得文件的DataURI
開始讀取指定的Blob對象或File對象中的內(nèi)容。當(dāng)讀取操作完成時(shí)，readyState屬性的值會成為DONE，如果設(shè)置了onloadend事件處理程序，則調(diào)用之。同時(shí)，result屬性中將包含一個(gè)data:URL格式的字符串以表示所讀取文件的內(nèi)容。
var reader = new FileReader();reader.onload = function() { console.log(this.result);}reader.readAsDataURL(file);
除了可以使用base64字符串作為內(nèi)容的DataURI將一個(gè)文件嵌入到另外一個(gè)文檔里，還可以使用URL對象。URL對象用于生成指向File對象或Blob對象的URL
objectURL = URL.createObjectURL(blob);blob是用來創(chuàng)建 URL 的 File 對象或者 Blob 對象?
window.URL.revokeObjectURL(objectURL);objectURL是一個(gè) DOMString，表示通過調(diào)用 URL.createObjectURL() 方法產(chǎn)生的 URL 對象
同樣以拖拽上傳圖片預(yù)覽為例子：
<body> <div id="dropbox" class="dropbox"> <div class="area">拖動(dòng)圖片到這里</div> </div> <div id="preview"></div> <script type="text/javascript"> var dropbox = document.querySelector("#dropbox"); var preview = document.querySelector("#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(); console.log(e) var dt = e.dataTransfer; var files = dt.files; for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = new RegExp("^image\/"); if (!imageType.test(file.type)) { console.log(1) continue; } // 填充選擇的圖片到展示區(qū) var img = document.createElement("img"); img.classList.add("obj"); img.file = file; img.src = window.URL.createObjectURL(file); preview.appendChild(img); } }, false); </script></body>?
實(shí)際上上文的File對象只是 Blob 對象的一個(gè)更具體的版本，Blob對象 存儲著大量的二進(jìn)制數(shù)據(jù)，并且 Blob 的 size 和 type 屬性，都會被 File 對象所繼承。同樣FileReader對象也可以從Blob對象中讀取數(shù)據(jù)
一個(gè) Blob對象表示一個(gè)不可變的, 原始數(shù)據(jù)的類似文件對象。Blob表示的數(shù)據(jù)不一定是一個(gè)JavaScript原生格式。 File 接口
基于Blob，繼承blob功能并將其擴(kuò)展為支持用戶系統(tǒng)上的文件。
使用Blob()構(gòu)造函數(shù)可以構(gòu)造一個(gè)Blob從其他非blob對象和數(shù)據(jù)。要?jiǎng)?chuàng)建一個(gè)包含另一個(gè)blob的數(shù)據(jù)子集的blob，使用slice()方法。
Blob構(gòu)造函數(shù)，接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)包含實(shí)際數(shù)據(jù)的數(shù)組，第二個(gè)參數(shù)是數(shù)據(jù)的類型，這兩個(gè)參數(shù)都不是必需的。數(shù)組元素可以是任意多個(gè)的ArrayBuffer，ArrayBufferView (typed array)， Blob，或者 DOMString對象。例如：
var arr = ['<h1>hello world</h1>'];var blob = new Blob(arr, { "type" : "text/xml" }); // the blobconsole.log(blob);Blob對象的slice方法，將二進(jìn)制數(shù)據(jù)按照字節(jié)分塊，返回一個(gè)新的Blob對象
var newBlob = oldBlob.slice(startingByte, endindByte);返回一個(gè)新的 Blob 對象，包含了源 Blob 對象中指定范圍內(nèi)的數(shù)據(jù)。
使用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);/** * dataURL to blob, ref to https://gist.github.com/fupslot/5015897 * @param dataURI * @returns {Blob} */function dataURItoBlob(dataURI) { var byteString = atob(dataURI.split(',')[1]); var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ab], {type: mimeString});}// atob() 將base64解碼// btoa() 將字符串轉(zhuǎn)碼為base64var str = 'javascript';window.btoa(str)//轉(zhuǎn)碼結(jié)果 "amF2YXNjcmlwdA=="window.atob("amF2YXNjcmlwdA==")//解碼結(jié)果 "javascript"用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控件,我們還可以使用XMLHttpRequest的send()方法來異步的提交這個(gè)”表單”.比起普通的ajax,使用FormData的最大優(yōu)點(diǎn)就是我們可以異步上傳一個(gè)二進(jìn)制文件
使用
new FormData (form? : HTMLFormElement)form 參數(shù)可選，是一個(gè)HTML表單元素，可以包含任何形式的表單控件,包括文件輸入框。
方法
append() 給當(dāng)前FormData對象添加一個(gè)鍵/值對
void append(DOMString 鍵, Blob 值, [可選] DOMString 文件名);void append(DOMString 鍵, DOMString 值);
- name 字段名稱
- value 字段值，可以是Blob value，或者一個(gè)字符串，如果全都不是，則該值會被自動(dòng)轉(zhuǎn)換成字符串
通過HTML表單創(chuàng)建FormData對象提交上傳（base64）
<form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id="upload" type="button">upload</button></form>$.ajax({ url: '/upload', type: 'POST', cache: false, data: new FormData($('#uploadForm')[0]), processData: false, contentType: false}).done(function(res) {}).fail(function(res) {});構(gòu)造 FormData 填充二進(jìn)制文件數(shù)據(jù)，通過 ajax 的方式進(jìn)行提交：
var fd = new FormData(); // 構(gòu)造FromData對象var blob = dataURItoBlob(dataURI); // 將base64轉(zhuǎn)為二進(jìn)制blob對象fd.append('file', blob);$.ajax({ type: 'POST', url: '/upload', data: fd, processData: false, // 不會將 data 參數(shù)序列化字符串,必須false contentType: false, // 根據(jù)表單 input 提交的數(shù)據(jù)使用其默認(rèn)的 contentType，必須false xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; console.log('進(jìn)度', percentComplete); } }, false); return xhr; }}).success(function (res) { // 拿到提交的結(jié)果}).error(function (err) { console.error(err);});原文地址：https://www.jianshu.com/p/54d5f8df3b97
聯(lián)系客服
