操作文件
在HTML表單中,可以上傳文件的唯一控件就是<input type='file'>
注意:當一個表單包含<input type='file'>時,
表單的enctype必須制定為multipart/from-data,
method必須制定為post,
瀏覽器才能正確編碼并以multiparty/form-data格式發(fā)送表單的數(shù)據(jù)
由于處于安全考慮,瀏覽器只允許用戶點擊<input type='file'>來選擇本地文件,用JavaScript對<input type='file'>的value賦值是沒有任何效果的,當用戶選擇了上傳某個文件后,JavaScript也無法獲得該文件的真實路徑
通常,上傳的文件都有由后臺服務(wù)器處理,JavaScript可以在提交表單時對文件擴展名做檢查,以防止用戶上傳無效格式的文件:
var f = document.getElementById('test-file-upload');
var filename = f.value;
if (!filename || !(filename.endsWith('.jpg')||filename.endsWith('.png')||filename.endsWith('.gif'))) {
alert('can only upload image file.')
return false;
}
File API
JavaScript對用戶上傳的的文件操作非常有限,尤其是無法讀取文件內(nèi)容,使得很多需要操作文件的網(wǎng)頁不得不用Flash這樣的第三方插件來實現(xiàn)
隨著HTML5的普及,新增的FileAPI允許JavaScript讀取文件內(nèi)容,獲取的更多的文本信息
HTML5的FielAPI提供了File和FileREnder兩個主要對象,可以獲得文件信息并讀取文件
下面的例子演示了如何讀取用戶選取的圖片文件突委，并在一個<div>中預(yù)覽圖像：
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 監(jiān)聽change事件:
fileInput.addEventListenser('change',function(){
//清除背景圖片
preview.style.backgroundImage = '';
//檢查文件是否選擇
if (!fileInput.value) {
info.innerHTML = '沒有選擇文件';
return;
}
//獲取File引用
var file = fileInput.files[0];
//獲取file信息
info.innerHTML = `
文件: ${file.name}
大小: ${file.size}
修改: ${file.lastModifiedDate}
`;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的圖片文件!');
return;
}
//讀取文件
var reader = new FileReader();
reader.onload = function(e){
var
data = e.target.result;
preview.style.backgroundImage = 'url(' + data + ')';
};
//以dataURL的形式讀取文件
reader.readAsDataURL(file);
});
上述代碼演示了如何通過HTML5的FileAPI讀取文件內(nèi)容,以dataURL形式讀取到的文件是一個字符串,類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...
常用于設(shè)置圖像,如果需要服務(wù)器端處理,把字符串base64,后面的字符串發(fā)送給服務(wù)器并用Base64解碼就可以得到原始文件的二進制內(nèi)容
回調(diào)
上面代碼還演示了JavaScript的一種重要的特性就是單線程執(zhí)行模式,在JavaScript中,瀏覽器的JavaScript執(zhí)行引擎在執(zhí)行JavaScript代碼時,總是以單線程模式執(zhí)行,也就是說
任何時候,JavaScriptdiamante都不可能同時有多于一個線程在執(zhí)行
單線程執(zhí)行的JavaScript如何處理多任務(wù)? 在JavaScript中,執(zhí)行多任務(wù)實際上都是異步調(diào)用,比如上面的代碼
reader.readAsDataURL(file);
就會發(fā)起一個異步操作來讀取文件內(nèi)容,因為是異步操作,所以我們在JavaScript代碼中就不知道什么時候操作結(jié)束,因此需要先設(shè)置一個毀掉函數(shù)
reader.onload = function(e) {
// 當文件讀取完成后踢步，自動調(diào)用此函數(shù):
};
當文件讀取完成后娃豹，JavaScript引擎將自動調(diào)用我們設(shè)置的回調(diào)函數(shù)缩宜。執(zhí)行回調(diào)函數(shù)時，文件已經(jīng)讀取完畢浩习，所以我們可以在回調(diào)函數(shù)內(nèi)部安全地獲得文件內(nèi)容同辣。
