一雪营、HTML
<input type="file" id="img-file" capture="camera" multiple accept="image/*" onchange="handleFiles(this)"/>
備注：默認的樣式看起來很糟糕囊榜，設置opacity=0，然后再加上設計樣式但骨；（具體可參考百度圖片搜索）
1躲惰、input使用type=file進行文件選擇致份；
2、capture="camera"表示可以捕獲到系統(tǒng)默認的照相機础拨；
3氮块、multiple表示可以進行多選；
4诡宗、accept="image/*"表示匹配的文件類型滔蝉；accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"可以看得更清晰；
二塔沃、文件信息
window.handleFiles = function (element) {
if (!element.files[0]) {
return;
}
for (var prop in element.files[0]) {
console.log('file info '+prop+':'+element.files[0][prop]);
}
}蝠引；
直接從File對象可以獲取名稱、修改時間蛀柴、類型螃概、大小等信息。
三名扛、圖片內容
1、FileReader.readAsDataURL
讀取圖片內容可以使用FileReader的readAsDataURL接口
var reader = new FileReader();
reader.onload = function (theFile) {
document.getElementById('img-display').setAttribute('src', theFile.target.result);
// 讀取到的theFile.target.result是base64數(shù)據(jù)
};
reader.readAsDataURL(element.files[0]);
FileReader的接口參數(shù)為File對象或Blob對象茧痒，用于讀取文件內容肮韧。
主要的接口：
readAsBinaryString(Blob|File) ：讀取結果為二進制字符串，每個字節(jié)包含一個0到255之間的整數(shù)旺订。
readAsText(Blob|File, opt_encoding) ：讀取結果是一個文本字符串弄企。
readAsDataURL(Blob|File) ： 讀取結果是一個基于Base64編碼的 data-uri 對象。
readAsArrayBuffer(Blob|File) ：讀取結果是一個 ArrayBuffer 對象区拳。
主要的回調函數(shù)：
onabort：讀取中斷時觸發(fā)拘领。
onerror：讀取出錯時觸發(fā)。
onload：讀取成功后觸發(fā)樱调。
2约素、上傳文件
一般情況下有兩種方式上傳文件：
2.1、通過File對象上傳圖片的二進制信息笆凌；
2.2圣猎、通過FileReader. readAsDataURL上傳Base64編碼對象；
四乞而、入坑
1送悔、accept="image/*"與accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
問題：使用前者在webkit內核瀏覽器可能導致選擇文件延遲；而使用后者則很容易漏掉一些圖片（尤其是一些奇葩的Android機型）
解決：沒有好的解決方法，只能根據(jù)應用場景進行取舍欠啤。
2荚藻、capture="camera"不可用
問題：在一款華為的機器上加上capture="camera"后，不彈出文件選擇框洁段；
解決：去掉capture="camera"应狱；（好尷尬，真心不知道怎么辦）
3眉撵、input file無法重復選擇一個文件
問題：在監(jiān)聽input的onchange時侦香，如果第二次選擇的與第一次選擇的文件相同，則不會回調onchange纽疟。
解決：如果確實需要回調罐韩，可以克隆一個同樣的input
inputElement.after(newSomeQa.clone().val(""));
inputElement.remove();
4、iPhone的照片被90°旋轉
問題：iPhone中保存的照片采用background-img的方式顯示時會被90°旋轉
解決：
4.1 采用img標簽顯示
4.2 讀取照片的EXIF信息在顯示做相應的旋轉處理（才用background-img顯示圖片在處理縮放截取時比較方便）
EXIF.getData(element.files[0], function () {
var orientationPhoto = EXIF.getTag(this, 'Orientation');
var lastDeg;
if (orientationPhoto == 6) {
lastDeg = 90;
} else if (orientationPhoto == 8) {
lastDeg = 270;
} else if (orientationPhoto == 3) {
lastDeg = 180;
}
document.getElementById('img-display').style.transform = 'rotate(' + lastDeg + 'deg)';
});
五污朽、附錄——EXIF
Exif是一種圖像文件格式散吵，在JPEG格式頭部插入了數(shù)碼照片的一些拍攝信息。
EXIF.js——https://github.com/exif-js/exif-js 蟆肆。
