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.
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
