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
    评论
To convert a DOCX file to an HTML file using docx4j, you can follow these steps: 1. Add the docx4j dependency to your project. You can do this by including the following Maven dependency in your project's pom.xml file: ```xml <dependency> <groupId>org.docx4j</groupId> <artifactId>docx4j</artifactId> <version>8.2.10</version> </dependency> ``` 2. Load the DOCX file using docx4j. Here's an example: ```java import org.docx4j.Docx4J; import org.docx4j.convert.out.HTMLSettings; import org.docx4j.openpackaging.packages.WordprocessingMLPackage; public class DocxToHtmlConverter { public static void main(String[] args) throws Exception { // Load the DOCX file WordprocessingMLPackage wordMLPackage = Docx4J.load(new File("input.docx")); // Setup HTML conversion options HTMLSettings htmlSettings = Docx4J.createHTMLSettings(); // Convert the DOCX to HTML String htmlOutput = Docx4J.toHTML(htmlSettings, wordMLPackage.getMainDocumentPart()); // Save the HTML output to a file FileUtils.writeStringToFile(new File("output.html"), htmlOutput, "UTF-8"); } } ``` Make sure to replace "input.docx" with the path to your actual input DOCX file and "output.html" with the desired output HTML file path. 3. Run the code, and it will generate the HTML output file. Note that docx4j may not support all features of complex DOCX files, so the resulting HTML might not be an exact representation of the original document. You may need to adjust the generated HTML or use additional libraries to achieve the desired output.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值