閑言： 上篇我們學習了一些下載的js前端方式，這篇來講講上傳篇。這也是在項目需求中很常見的O(∩_∩)O。
demo代碼：https://github.com/NARUTOne/DownAndUp.git
參考網址：
http://www.ruanyifeng.com/blog/2012/08/file_upload.html
https://segmentfault.com/a/1190000006600936
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
https://developer.mozilla.org/zh-CN/docs/Web/API/File
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects
上傳の方式
Form && Input
采用傳統的form表單或異步ajax上傳。至于以前通過iframe來進行異步上傳，這里不詳細介紹，想了解可以看
http://www.ruanyifeng.com/blog/2012/08/file_upload.html。
<form id="upload-form" action="./upload.do"
onsubmit="return handleSubmit(this)" method="post" enctype="multipart/form-data" >
<div class="filePicker">
<label>點擊選擇文件</label>
<input id="fileInput1" type="file" name="files" multiple="multiple">
</div>
<input type="submit" value="上傳" />
</form>
知識點：
1、input file標簽設置accept屬性進行文件選擇過濾，該屬性的值必須為一個逗號分割的列表,包含了多個唯一的內容類型聲明：
- 以 STOP 字符 (U+002E) 開始的文件擴展名。（例如：".jpg,.png,.doc"）
一個有效的 MIME 類型，但沒有擴展名
- audio/* 表示音頻文件 HTML5
- video/* 表示視頻文件 HTML5
- image/* 表示圖片文件
2、設置multiple屬性可以進行設置為多選。
3、設置capture屬性可以進行設置打開攝像拍照或者錄像。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">
接著采用js來獲取file對象，進行異步上傳。
var fileInput1 = document.getElementById("fileInput1");
fileInput1.addEventListener('change', function(event) {
var file = fileInput1.files[0];
// 或file = fileInput1.files.item(0);
console.log(file);
document.getElementById('showFile1').innerHTML= file.name
}, false);
function handleSubmit(_this) {
var form = $(_this);
// mulitipart form,如文件上傳類
var formData = new FormData();
formData.append('files', $('#fileInput1')[0].files[0]);
// var formData = new FormData(form[0]);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: formData,
mimeType: "multipart/form-data",
contentType: false,
cache: false,
processData: false
}).success(function (res) {
//成功提交
console.log(res)
document.getElementById('result').innerHTML= '上傳成功'
}).error(function (jqXHR, textStatus, errorThrown) {
//錯誤信息
document.getElementById('result').innerHTML= '上傳失敗'
});
return false;
}
注意：預防form表單提交的跳轉action。
1、ajax中的resquest-header: multipart/form-data
2、參數及文件均需要使用new FormData()實例 append()
file對象：
- lastModifiedDate：文件對象最后修改的日期
- name：文件名,只讀字符串,不包含任何路徑信息.
- size：文件大小,單位為字節,只讀的64位整數.
- type：MIME類型,只讀字符串,如果類型未知,則返回空字符串.
type屬性判斷用戶的文件類型不太準確，用戶會改變后綴名；size可以做大小限制判斷。
HTML5 拖拽操作文件
HTML5拖拽知識可以參考我以前的拖拽文章：http://www.lxweimin.com/p/6cd34dfe87fd。
對文件的操作還采用了一些FileReader API的知識，這個等會下面會簡單介紹哈:-D。
<div class='demo-box'>
<div class="demo-content">
<a href="javascript:;">選擇圖片文件拖拽至下方框中，實現拖拽上傳及圖片預覽</a>
<div id="dropbox" class="dropbox">
<div class="area"></div>
</div>
<div id="preview"></div>
</div>
</div>
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);
FileReader API ##
使用FileReader對象,web應用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數據緩沖)內容,可以使用File對象或者Blob對象來指定所要處理的文件或數據.其中File對象可以是來自用戶在一個< input >元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的 DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后的返回結果。
DataURI && URL
URL 是uniform resource locator的縮寫，在web中的每一個可訪問資源都有一個URL地址，例如圖片，HTML文件，js文件以及style sheet文件，我們可以通過這個地址去download這個資源。其實URL是URI的子集，URI是uniform resource identifier的縮寫。
URI 是用于獲取資源，包括其附加的信息的一種協議。附加信息可能是地址，也可能不是地址，如果是地址，那么這時URI就變成URL了。
注意的是data URI不是URL，因為它并不包含資源的公共地址。
DataURI
DataURI對象，允許將一個小文件進行編碼后嵌入到另外一個文檔里。
data:[<MIME type>][;charset=<charset>][;base64],<encoded data>
eg: data:image/png;base64,xxxxxxxxxxxxx
整體可以視為三部分，即聲明：參數+數據，逗號左邊的是各種參數，右邊的是數據。
通過FileReader 的readAsDataURL方法獲得：
//讀取File對象中的內容
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result; //result屬性中將包含一個data: URL格式的字符串以表示所讀取文件的內容.
};
})(img);
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。
var objecturl = window.URL.createObjectURL(file);
靜態方法會創建一個 DOMString，它的 URL 表示參數中的對象。這個 URL 的生命周期和創建它的窗口中的 document 綁定。這個新的URL 對象表示著指定的 File 對象或者 Blob 對象。
window.URL.revokeObjectURL(objecturl)
靜態方法用來釋放一個之前通過調用 window.URL.createObjectURL() 創建的已經存在的 URL 對象。當你結束使用某個 URL 對象時，應該通過調用這個方法來讓瀏覽器知道不再需要保持這個文件的引用了
對象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詳解:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
上傳實例：以二進制流上傳文件
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對象有兩個只讀屬性：
- size：二進制數據的大小，單位為字節。
- type：二進制數據的MIME類型，全部為小寫，如果類型未知，則該值為空字符串。在Ajax操作中，如果xhr.responseType設為blob，接收的就是二進制數據。
** blob創建 **
1）構成函數
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生成的內容，想讓瀏覽器進行下載要如何辦到呢？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>
2)Blob對象的slice方法生成blob對象
Blob對象的slice方法，將二進制數據按照字節分塊，返回一個新的Blob對象。
var newBlob = oldBlob.slice(startingByte, endindByte);
大文件分割上傳:
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);
終語##
文件上傳下載，暫時就講這么多哈O(∩_∩)O，智商知識技能有限，也就只能模仿學習到這哈。歡迎大家留言交流，互相進步(????)。
這里給個上傳應用的例子（大神制作）：前端實現文件的斷點續傳。
