File API是HTML5新增內容，依靠file和FileReader，這兩個對象完成，代碼如下：

var
    fileInput = document.getElementById(‘test-image-file‘),
    info = document.getElementById(‘test-file-info‘),
    preview = document.getElementById(‘test-image-preview‘);
// 監聽change事件:
fileInput.addEventListener(‘change‘, function () {
    // 清除背景圖片:
 

    preview.style.backgroundImage = ‘‘;
    // 檢查文件是否選擇:
    if (!fileInput.value) {
        info.innerHTML = ‘沒有選擇文件‘;
        return;
    }
    // 獲取File引用:
    var file = fileInput.files[0];
    // 獲取File信息:
    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; // ‘data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...‘            
 

        preview.style.backgroundImage = ‘url(‘ + data + ‘)‘;
    };
    // 以DataURL的形式讀取文件:
    reader.readAsDataURL(file);
});

javaScript 通過flie API讀取本地文件