建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下JavaScript如何操作文件，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
為茫崖等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及茫崖網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、茫崖網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
在HTML表單中，可以上傳文件的唯一控件就是。
注意：當(dāng)一個(gè)表單包含時(shí)，表單的enctype必須指定為multipart/form-data，method必須指定為post，瀏覽器才能正確編碼并以multipart/form-data格式發(fā)送表單的數(shù)據(jù)。
出于安全考慮，瀏覽器只允許用戶點(diǎn)擊來(lái)選擇本地文件，用JavaScript對(duì)的value賦值是沒(méi)有任何效果的。當(dāng)用戶選擇了上傳某個(gè)文件后，JavaScript也無(wú)法獲得該文件的真實(shí)路徑：
通常，上傳的文件都由后臺(tái)服務(wù)器處理，JavaScript可以在提交表單時(shí)對(duì)文件擴(kuò)展名做檢查，以便防止用戶上傳無(wú)效格式的文件：
var f = document.getElementById('test-file-upload');
var filename = f.value; // 'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
alert('Can only upload image file.');
return false;
}File API
由于JavaScript對(duì)用戶上傳的文件操作非常有限，尤其是無(wú)法讀取文件內(nèi)容，使得很多需要操作文件的網(wǎng)頁(yè)不得不用Flash這樣的第三方插件來(lái)實(shí)現(xiàn)。
隨著HTML5的普及，新增的File API允許JavaScript讀取文件內(nèi)容，獲得更多的文件信息。
HTML5的File API提供了File和FileReader兩個(gè)主要對(duì)象，可以獲得文件信息并讀取文件。
下面的例子演示了如何讀取用戶選取的圖片文件，并在一個(gè)
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 監(jiān)聽change事件:
fileInput.addEventListener('change', function () {
// 清除背景圖片:
preview.style.backgroundImage = '';
// 檢查文件是否選擇:
if (!fileInput.value) {
info.innerHTML = '沒(méi)有選擇文件';
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; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式讀取文件:
reader.readAsDataURL(file);
});上面的代碼演示了如何通過(guò)HTML5的File API讀取文件內(nèi)容。以DataURL的形式讀取到的文件是一個(gè)字符串，類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...，常用于設(shè)置圖像。如果需要服務(wù)器端處理，把字符串base64,后面的字符發(fā)送給服務(wù)器并用Base64解碼就可以得到原始文件的二進(jìn)制內(nèi)容。
回調(diào)
上面的代碼還演示了JavaScript的一個(gè)重要的特性就是單線程執(zhí)行模式。在JavaScript中，瀏覽器的JavaScript執(zhí)行引擎在執(zhí)行JavaScript代碼時(shí)，總是以單線程模式執(zhí)行，也就是說(shuō)，任何時(shí)候，JavaScript代碼都不可能同時(shí)有多于1個(gè)線程在執(zhí)行。
你可能會(huì)問(wèn)，單線程模式執(zhí)行的JavaScript，如何處理多任務(wù)？
在JavaScript中，執(zhí)行多任務(wù)實(shí)際上都是異步調(diào)用，比如上面的代碼：
reader.readAsDataURL(file);
就會(huì)發(fā)起一個(gè)異步操作來(lái)讀取文件內(nèi)容。因?yàn)槭钱惒讲僮?，所以我們?cè)贘avaScript代碼中就不知道什么時(shí)候操作結(jié)束，因此需要先設(shè)置一個(gè)回調(diào)函數(shù)：
reader.onload = function(e) {
// 當(dāng)文件讀取完成后，自動(dòng)調(diào)用此函數(shù):
};當(dāng)文件讀取完成后，JavaScript引擎將自動(dòng)調(diào)用我們?cè)O(shè)置的回調(diào)函數(shù)。執(zhí)行回調(diào)函數(shù)時(shí)，文件已經(jīng)讀取完畢，所以我們可以在回調(diào)函數(shù)內(nèi)部安全地獲得文件內(nèi)容。
以上是“JavaScript如何操作文件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站題目：JavaScript如何操作文件
瀏覽地址：http://www.dlmjj.cn/article/ppdpgd.html
