How to read text file in client side via HTML5

原创于 2012-08-15 15:56:12 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用HTML5的FileReader接口读取本地文本文件。通过示例代码展示了读取过程及注意事项，并对比了HTML4中使用ActiveX的方式。

In HTML4, As we known, if you want to read a local text file with javascript, you may need to use ActiveX object, there is a blog describes how to read text file by using ActiveX, clickhere. In other words, this solution cannot work on another browser, just like: Firefox, Opera, Safari, etc.

But now, we have HTML5, it supports we read local file via FileReader, it's an interface that provides methods to read file objects or blog objects into memory, it's asynchronous call.

OK, let me show how to read a local text file by using FileReader.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
        /*
        * @description: read local text file via the html5 FileReader
        **/
        function getFileContent(fileInput, callback) {
            if (fileInput.files && fileInput.files.length > 0 && fileInput.files[0].size > 0) {
                var file = fileInput.files[0];
                if (window.FileReader) {
                    var reader = new FileReader();

                    reader.onloadend = function (evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            callback(evt.target.result.split(',')[1]);
                        }
                    }

                    reader.readAsDataURL(file);
                }
            }
        }

        function decode_base64(s) { var e = {}, i, k, v = [], r = '', w = String.fromCharCode; var n = [[65, 91], [97, 123], [48, 58], [43, 44], [47, 48]]; for (z in n) { for (i = n[z][0]; i < n[z][1]; i++) { v.push(w(i)); } } for (i = 0; i < 64; i++) { e[v[i]] = i; } for (i = 0; i < s.length; i += 72) { var b = 0, c, x, l = 0, o = s.substring(i, i + 72); for (x = 0; x < o.length; x++) { c = e[o.charAt(x)]; b = (b << 6) + c; l += 6; while (l >= 8) { r += w((b >>> (l -= 8)) % 256); } } } return r; }

        $(function () {
            $('#b1').click(function () {
		// please do not use $('f1') to get the file dom element, otherwise, you'll get a js error.
                getFileContent(document.getElementById('f1'), function (str) {
                    
                    alert(decode_base64(str));
                });
            });
        });
    </script>
</head>
<body>
    <input type="file" id="f1" />
    <input type="button" id="b1" value="read" />
</body>
</html>

You need to run the above HTML page in IE9 or another browser which supports HTML5.

Attention please, because the reading action is asynchronous, so you need to call a callback function in onloadend event.

『Extending this topic』

Methods of the FileReader interface

Function name
Parameters
Description

readAsBinaryString file it reads file as binary code
readAsText file, [encoding] it reads file as text
readAsDataURL file it reads file as DataURL
abort (none) interrupt reading

Events of the FileReader interface

Event
Description

onabort it's triggered while interrupting reading
onerror it's triggered while occurring error
onloadstart it's triggered while starting reading
onprogress it's triggered while processing reading
onload it's triggered while finishing reading successful
onloadend it's triggered while finishing reading, whatever successful or failed

You can read file as binary code or DataURL type, so you can do more optional things, for example, you can provide a download window via DataURL, and never go through the server side, if you want to know something about Data URI, clickhere, it introduces what'sData URI scheme.

And you also can read file content in client side, and display them, so that you have no need to upload them to server side just for file preview.

Function name	Parameters	Description
readAsBinaryString	file	it reads file as binary code
readAsText	file, [encoding]	it reads file as text
readAsDataURL	file	it reads file as DataURL
abort	(none)	interrupt reading

Event	Description
onabort	it's triggered while interrupting reading
onerror	it's triggered while occurring error
onloadstart	it's triggered while starting reading
onprogress	it's triggered while processing reading
onload	it's triggered while finishing reading successful
onloadend	it's triggered while finishing reading, whatever successful or failed