javascript操作本地文件问题
js不用ActiveX控件可以操作本地文件吗，以前在IE上用fso对象，但是好像Chrome和opera等都不支持ActiveX控件，听说html5可以操作文件但是我不会...
js不用ActiveX控件可以操作本地文件吗，以前在IE上用fso对象，但是好像Chrome和opera等都不支持ActiveX控件，听说html5可以操作文件但是我不会，具体怎么操作呀，比如说读取一个文本文档，用Enumerator枚举一个文件夹里所有文件，如果可以最好举一个简单例子，最好IE和chrome都兼容的办法，实在不行就举一个chrome可以的，我再做一个判断浏览器，如果是IE就用ActiveX，谢谢。
展开
2个回答
展开全部
先说下，web应用是不能操作本地文件的，这个是不安全，不允许的。Active控件是ie特有的。你访问一个网站，人家就可以在你电脑上任意操作文件，怎么想都不合理吧。html5 提供了filesystem的api，也是向系统申请一块空间，只能作为沙盒，可以由你进行存储应用数据。也就是说在沙盒里面，你可以任意操作，但其他应用是不能访问的，是独立的一块空间。 当然你可以读取本地的文件内容，这没影响。以下就说说本地文件的读取
主要就是应用 file 接口，filereader接口
附上2个例子，第一个是获取各种文件的各种属性，第二个是以不同方式读取文件内容
<html>
<head>
<meta charset="utf8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetFile").click(function (e) {
var fileList = document.getElementById("fileDemo").files;
for (var i = 0; i < fileList.length; i++) {
if (!(/image\/\w+/.test(fileList[i].type))) {
$("#result").append("<span>type:"+fileList[i].type+"--******非图片类型*****--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
}
else {
$("#result").append("<span>type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
}
}
});
});
</script>
</head>
<body>
<form action="/home/index" method="POST" novalidate="true">
<input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /><br/>
<input type="button" value="获取文件的名字" id="btnGetFile"/>
<div id="result"></div>
</form>
<hr/>
</body>
</html>
-------------------------------------------------------------------------------------------
<html >
<head>
<title></title>
<script type="text/javascript">
if(typeof FileReader == "undified") {
alert("您老的浏览器不行了！");
}
function showDataByURL() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
reader.readAsDataURL(resultFile);
reader.onload = function (e) {
var urlData = this.result;
document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
};
}
}
function showDataByBinaryString() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
//异步方式，不会影响主线程
reader.readAsBinaryString(resultFile);
reader.onload = function(e) {
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
};
}
}
function showDataByText() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
reader.readAsText(resultFile,'gb2312');
reader.onload = function (e) {
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
};
}
}
</script>
</head>
<body>
<input type="file" name="fileDemo" id="fileDemo" multep/>
<input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
<input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/>
<input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/>
<div id="result">
</div>
</body>
</html>
主要就是应用 file 接口，filereader接口
附上2个例子，第一个是获取各种文件的各种属性，第二个是以不同方式读取文件内容
<html>
<head>
<meta charset="utf8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
$("#btnGetFile").click(function (e) {
var fileList = document.getElementById("fileDemo").files;
for (var i = 0; i < fileList.length; i++) {
if (!(/image\/\w+/.test(fileList[i].type))) {
$("#result").append("<span>type:"+fileList[i].type+"--******非图片类型*****--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
}
else {
$("#result").append("<span>type:"+fileList[i].type+"--name:"+fileList[i].name+"--size:"+fileList[i].size+"</span><br />");
}
}
});
});
</script>
</head>
<body>
<form action="/home/index" method="POST" novalidate="true">
<input type="file" multiple="multiple" name="fileDemo" id="fileDemo" /><br/>
<input type="button" value="获取文件的名字" id="btnGetFile"/>
<div id="result"></div>
</form>
<hr/>
</body>
</html>
-------------------------------------------------------------------------------------------
<html >
<head>
<title></title>
<script type="text/javascript">
if(typeof FileReader == "undified") {
alert("您老的浏览器不行了！");
}
function showDataByURL() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
reader.readAsDataURL(resultFile);
reader.onload = function (e) {
var urlData = this.result;
document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";
};
}
}
function showDataByBinaryString() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
//异步方式，不会影响主线程
reader.readAsBinaryString(resultFile);
reader.onload = function(e) {
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
};
}
}
function showDataByText() {
var resultFile = document.getElementById("fileDemo").files[0];
if (resultFile) {
var reader = new FileReader();
reader.readAsText(resultFile,'gb2312');
reader.onload = function (e) {
var urlData = this.result;
document.getElementById("result").innerHTML += urlData;
};
}
}
</script>
</head>
<body>
<input type="file" name="fileDemo" id="fileDemo" multep/>
<input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>
<input type="button" value="readAsBinaryString" id="readAsBinaryString" onclick="showDataByBinaryString();"/>
<input type="button" value="readAsText" id="readAsText" onclick="showDataByText();"/>
<div id="result">
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
