前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器

【自己测了下,能兼容各种浏览器,但是读取中文会出现乱码。自己的解决方法是用notepad++把txt文件编码改为utf-8(应该是和浏览器编码保持一致吧?。。)】

原文  http://blog.csdn.net/xwq1012/article/details/41941895

参考如下:

http://blog.csdn.net/lejuo/article/details/11528243

前台JS读取本地文件内容,兼容IE7、8、9、10 FF Chrome等各种版本,纠结了好长时间,终于找到方法,希望能帮到你,代码如下。直接复制保存为html运行看效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script>
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‘){
		var xmlDoc;
		xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
		xmlDoc.async = false;
		xmlDoc.load(input.value);
		alert(xmlDoc.xml);
	}
	//支持FF
	else if (document.implementation && document.implementation.createDocument) {
		var xmlDoc;
		xmlDoc = document.implementation.createDocument("", "", null);
		xmlDoc.async = false;
		xmlDoc.load(input.value);
		alert(xmlDoc.xml);
	} else {
		alert(‘error‘);
	}
}
</script>
<title>file upload</title>
</head>
<body>
	<input type="file" onchange="upload(this)" />
</body>
</html>
时间: 2024-10-13 02:23:10

前台JS(type=‘file’)读取本地文件的内容,兼容各种浏览器的相关文章

前端用js获取本地文件的内容

这里要写成input的形式 调用upload函数 传递的参数就表示所选的文件<input type="file" onchange="upload(this)" /> //前端读取本地文件的内容 下面代码中的this.result即为获取到的内容 function upload(input) { //支持chrome IE10 if (window.FileReader) { var file = input.files[0]; filename = f

JS读取本地文件及目录的方法

Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级 的功能吧?比如,对文件和文件夹进行读.写和删除,就象在VB.VC等高级语言中经常做的工作一样.怎么样,你是否需要了解这方面的知 识?那就请跟我来,本文将详细描述如何使用Javascript语言进行文件操作. 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.

H5读取本地文件操作

H5读取本地文件操作 本文转自:转:http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html感谢大神分享. 常见的语言比如php.shell等,是如何读取文件的呢? 实际上,大多数语言都需要先获取文件句柄,然后调用文件访问接口,打开文件句柄,读取文件! 那么,HTML5是否也是这样的呢? 答案是肯定的! HTML5为我们提供了一种与本地文件系统交互的标准方式:File Api. 该规范主要定义了以下数据结构: File Fil

FileReader读取本地文件

FileReader是一种异步读取文件机制,结合input:file可以很方便的读取本地文件. 一.input:type[file] file类型的input会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名).file类型的input会有files属性,保存着文件的相关信息. <input type="file" name="" id="fileBox"> 点击按钮,上传一个文件后,在

jquery读取本地文件

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({

input type=&#39;file&#39; 上传文件 判断图片的大小是否合格与witdh 和 height 是否合格

function CheckFiles(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:) var isE

input type="file" 取得本地路径是不可能兼容所有浏览器的。

昨天公司需要做个对本地上传图片大小和尺寸的检测,需要用js来判断.经过我一天的研究发现,发现在ie下input的value值是本地的绝对路径,而高端浏览器,如谷歌,火狐却不是绝对路径,也就是说这些高端浏览器出于安全考虑不允许读到本地绝对路径(具体的危险待查).也就是说只有通过后端来解决这个问题. 前端高级浏览器可以用html5来解决. 还有就是某些浏览器的解决方法空了再加上来. input type="file" 取得本地路径是不可能兼容所有浏览器的.,布布扣,bubuko.com

使用js清空input file上传文件的内容

html页面代码如下: <input id="file_input" type="file" onchange="upLoadFile(this)" value="" />js的代码如下,可以直接将上传文件input按钮的内容直接清空: var obj=document.getElementById('file_input');obj.outerHTML=obj.outerHTML; ---------------

Cocos2d-x读取本地文件

在公司在项目开发的时候需要读取本地的文件,于是在网上搜索了一下以下关于Cocos2d-x文件读取的操作,用了两种方法都可以实现,一种是使用C++另种是Cocos2d-x代码如下: //读取文件(参数分别为文件名和文本框) void GameRegistry::readFile(const char *pFileName,UILabel *pLabel) { /*方法一 ifstream inFile; inFile.open(pFileName);//打开文件 string pSaveStr;/