JavaScript 使用 big5 大五碼 讀取檔案

在網頁上要讀取檔案中的文字非常的簡單，方法如下：

    
<input type="file" id="fileInput"/>

<script>
    var input = document.getElementById('fileInput');
    input.addEventListener('change', function (e) {
        var file = e.target.files[0];
        if (!file) return;

        var reader = new FileReader();
        reader.onload = function () {
            var contents = reader.result;
            console.log(contents);
        };
        reader.readAsText(file);
    });
</script>

    

如果是使用 UTF-8 可以很好的讀取檔案，但是如果檔案是 big 5 的編碼格式則會出現亂碼，要使用 big 5 來讀取檔案取得文字也很簡單，只要在 readAsText 的第二個參數 encoding 指定 big5 即可：

    
<input type="file" id="fileInput"/>

<script>
    var input = document.getElementById('fileInput');
    input.addEventListener('change', function (e) {
        var file = e.target.files[0];
        if (!file) return;

        var reader = new FileReader();
        reader.onload = function () {
            var contents = reader.result;
            console.log(contents);
        };
        reader.readAsText(file, 'big5');
    });
</script>

    

筆者在測試過程中有看到可以使用 jschardet 套件來「猜測」是使用哪種編碼格式，不過筆者在測試時不管是 utf8 還是 big5 都會顯示為 ascii，並且內容也無法正常讀取，對於內容較少的檔案很難成功判斷。

筆者也沒有找到可以只使用 CDN 就產生 big5 編碼格式檔案的方法，都需要有 node.js ，需要在後端才能成功處理。