友情链接:联系人：QQ前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器 一 - 推酷
前台JS（type=‘file’）读取本地文件的内容，兼容各种浏览器 一
前台JS读取本地文件内容，兼容IE7、8、9、10 FF Chrome等各种版本，纠结了好长时间，终于找到方法，希望能帮到你，代码如下。直接复制保存为html运行看效果。
&!DOCTYPE html&
&meta charset=&UTF-8& /&
function upload(input) {
//支持chrome IE10
if (window.FileReader) {
var file = input.files[0];
filename = file.name.split(&.&)[0];
var reader = new FileReader();
reader.onload = function() {
console.log(this.result)
alert(this.result);
reader.readAsText(file);
//支持IE 7 8 9 10
else if (typeof window.ActiveXObject != 'undefined'){
xmlDoc = new ActiveXObject(&Microsoft.XMLDOM&);
xmlDoc.async =
xmlDoc.load(input.value);
alert(xmlDoc.xml);
else if (document.implementation && document.implementation.createDocument) {
xmlDoc = document.implementation.createDocument(&&, &&, null);
xmlDoc.async =
xmlDoc.load(input.value);
alert(xmlDoc.xml);
alert('error');
&title&file upload&/title&
&input type=&file& onchange=&upload(this)& /&
参考如下：
http://blog.csdn.net/lejuo/article/details/
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致使用HTML5来实现本地文件读取和写入 - 博客频道 - CSDN.NET
中华胡杨的专栏
分类：HTML&CSS
最近有这样一个需求，就是在HTML页面中有个按钮导出，点击它，将构造一个文档并存储到本地文件系统中。另外还有个按钮，点击它，从本地文件系统中读取一个文件并对内容进行分析。
说白了，就是一件事，就是如何读取或写入本地文件系统中的文件。
这件事情在HTML5以前是一件非常恐怖的，因为浏览器对本地文件系统有非常强的保护，似乎是一种叫做沙盒的机制，总之是，JS不可以直接操作它。所以，这个时候，要想读某个文件，就需要将文件上传到服务器，然后服务器读取并解析这个文件，并将解析结果返回客户端。写一个文件，就稍微简单些，JS没办法写，所以只能是服务器动态生成一个文件，并以下载的方式来下载它（attachment）。但是这样其实是很不合理的。因为要操作这个文件的是JS引擎，但是中间还需要通过一个服务器。
HTML5来了！
它提供了一套文件系统的API，可以实现文件读写，我很好奇，这个需求可能是很常见的，但是网上却很少有Demo.所以，自己整理了一下。
文件读取要利用到的API是FileReader，在HTML中的元素为：
&input type="file" id="files" style="display:none" onchange="import();"/&
&input type="button" id="import" value="导入"/&
HTML中元素就这么简单，首先需要一个file类型的input元素，这里为啥要display:none呢？因为这个东西太丑了，，
$("#import").click(function(){
$("#files").click();
function import(){
var selectedFile = document.getElementById("files").files[0];
var name = selectedFile.
var size = selectedFile.
console.log("文件名:"+name+"大小："+size);
var reader = new FileReader();
reader.readAsText(selectedFile);
reader.onload = function(){
console.log(this.result);
这样，读取本地文件的操作就完成了。有些网友说什么使用ActiveXObject的什么的，这个只有在IE中才能使用，但是现在连微软都放弃了IE，所以，不要这样使用。
写入文件稍微复杂了一些，虽然在HTML5中与FileReader相对应的也有一个FileWriter，但是这个东西用起来实在是不爽，至少我查了大半天，没有找到一个可以用的API，此外，FileReader可以被Chrome、FF和Safari都支持。当然了，要求一定版本以上的。
但是FileWriter似乎只有被Chrome支持。不管了，能用就好。
&script type="text/javascript" src="./JS/FileSaver.js" charset="utf-8"&&/script&
&input type="button" id="export" value="导出"/&
$("#export).click(function(){
var content = "这是直接使用HTML5进行导出的";
var blob = new Blob([content], {type: "text/charset=utf-8"});
saveAs(blob, "file.txt");//saveAs(blob,filename)
that is it!! enjoy
排名：第6285名
（4）（244）（15）（4）（13）（10）（5）（2）（2）（5）（12）（2）}