How to read text file in client side via HTML5
2012-08-15 15:56
525 查看
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
Events of the FileReader interface
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.
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 |
| 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 |
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.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- How to read Json file or text file in Spark
- How to successfully edit readonly file in VS?
- My Wiki: How to read a properties file in a web application
- How To Read XML File In Java – (SAX Parser)
- How to Open a Text File in VB .NET
- Units Problem: How to read text size as custom attr from xml and set it to TextView in java code
- How to read data from a file in reverse order?
- How to Parse or Read XML File in Java >> XML Tutorial Example
- Units Problem: How to read text size as custom attr from xml and set it to TextView in java code
- How to read a text file attached to a Lotus Notes Document WITHOUT detaching it?
- Read a Text File with VBA in Excel, and Write the Text to a Spreadsheet
- How to Read, Write XLSX File in Java - Apach POI Example---reference
- How to get MetaData on client side in WCF?如何在客户端获取WCF service的元数据
- How to read data from csv file in c#
- How to read Mac .DMG file in Linux or PC(II)
- How to remove ^M in a uploaded text file?
- PDFBox – How to read PDF file in Java
- Units Problem: How to read text size as custom attr from xml and set it to TextView in java code
- How to read and parse CSV file in Java
- Shell: How to read lines in a file.