How to read text file in client side via HTML5


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
readAsBinaryStringfileit reads file as binary code
readAsTextfile, [encoding]it reads file as text
readAsDataURLfileit reads file as DataURL
abort(none)interrupt reading


  • Events of the FileReader interface

Event
Description
onabortit's triggered while interrupting reading
onerrorit's triggered while occurring error
onloadstartit's triggered while starting reading
onprogressit's triggered while processing reading
onloadit's triggered while finishing reading successful
onloadendit'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.

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值