HTML5新增了關(guān)于文件的File桐愉，F(xiàn)ileReader兩個(gè)對(duì)象，用于獲取文件信息和讀取文件信息。
var
? ? fileInput = document.getElementById('test-image-file'),
? ? info = document.getElementById('test-file-info'),
? ? preview = docement.getElementById('test-image-preview');
//監(jiān)聽(tīng)change事件
fileInput.addEventListener('change', function() {
? //清除背景圖片
? preview.style.backgroundImage = '';
? //檢查文件是否選擇
? if(!fileInput.value) {
? ? info.innerHTML = '沒(méi)有選擇文件';
? ? return;
? }
? //獲取file文件引用：
? var file = fileInput.files[0];
? //獲取文件信息
? info.innerHTML = '文件：' + file.name + '<br>' +
? ? ? ? ? ? ? ? ? '大小：' + file.size + '<br>' +
? ? ? ? ? ? ? ? ? '修改：' + 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.readerAsDataURL(file);
})
