HTML5 文件域+FileReader 讀取文件(二)

一、讀取文本文件內容，指定字符編碼

<div class="container">
    <!--文本文件驗證-->
    <input type="file" id="file" multiple accept="text/plain" />
    <input type="button" id="btn1" value="讀取文件內容" onclick="showFiles();" />
    <h4>選擇文件如下:</h4>
    <blockquote></blockquote>
</div>

js:

//讀取文本文件實例
var fileBox = document.getElementById('file');
function showFiles() {
    //獲取選擇文件的數組
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        readFile(file);
    }
}
//讀取文件內容
function readFile(file) {
    var reader = new FileReader();
    //中文windows系統 txt 文本多數默認編碼 gbk
    reader.readAsText(file, 'gbk');
    reader.onload = function (e) {
        var result = reader.result;
        $('.container blockquote').text(result);
    }
}

二、讀取或預覽客戶圖片

<div class="container">
    <!--圖片類型驗證方法1-->
    <input type="file" id="file" multiple accept="image/*" />
    <input type="button" id="btn1" value="選擇上傳文件" onclick="showFiles();" />
    <h4>選擇文件如下:</h4>
    <img src="" id="img1" />
</div>

JS：

//讀取圖片實例
var fileBox = document.getElementById('file');
function showFiles() {
    //獲取選擇文件的數組
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        //圖片類型驗證第二種方式
        if (/image\/\w+/.test(file.type))
            readFile(file);
        else
            console.log(file.name + ':不是圖片');
    }
}
//讀取圖片內容 為DataURL
//reader.readAsDataURL
function readFile(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var result = reader.result;
        $('.container blockquote').text(result);
        $('#img1').attr('src', result)
    }
}

 

簡單實例一： http://www.cnblogs.com/tianma3798/p/4355949.html