您的位置：首页 > Web前端 > HTML5

html5 读取本地文件

2016-06-06 17:32 537 查看
尊重原创：http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html

HTML5为我们提供了一种与本地文件系统交互的标准方式：File Api。

该规范主要定义了以下数据结构：

File

FileList

Blob

html5访问本地文件系统时，需要先获取File对象句柄，获取文件句柄的方式主要有两种：表单输入（选择文件）、拖拽。

表单输入：

表单提交是最常用的场景，用户选择文件以后，触发文件选择框的change事件，通过访问文件选择框元素的files属性可以拿到选择的文件列表。如果文件选择框指定了multiple="multiple"，则一个文件选择框可以同时选择多个文件，files包含了所有选择的文件对象；如果没有指定，则只能选择一个文件，files[0]就是所选择的文件对象。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">
#content{width:600px; height:300px; border: 1px solid #ddd; overflow: auto; margin-top:10px;}
</style>
</head>
<body>
<input type="file" name="" id="myFile" value="" multiple="multiple" />
</body>
<div id="content"></div>
</html>
<script type="text/javascript">
window.onload = function() {
var oFile = document.getElementById("myFile");
var oCotnent = document.getElementById("content");
oFile.addEventListener("change", function(ev) {
var event = ev || window.event;
var files = this.files;
for (var i = 0, len = files.length; i < len; i++) {
var reader = new FileReader();
var file = files[i];
reader.onload = (function(file) {
return function(e) {
var div = document.createElement('div');
div.innerHTML =this.result;
oCotnent.insertBefore(div, null);
};
})(file);
//读取文件内容
reader.readAsText(file,"utf-8");
}
}, false);
}
</script>


拖拽：拖拽是另一种常见的文件访问场景，这种方式通过dataTransfer的对象来获得拖拽文件列表。同样可以支持多文件拖拽。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#area{width:100%;height:200px; line-height: 200px; text-align: center; border: 1px solid #DDDDDD;}
#prev{width:100%;min-height: 400px; border: 1px solid #FF0000;}
</style>
</head>
<body>
<div id="area">将图片拖放到该区域</div>
<h1>图片预览</h1>
<hr />
<div id="prev"></div>
</body>
</html>
<script type="text/javascript">
window.onload = function(){
var oArea = document.getElementById("area");
var oPrev = document.getElementById("prev");

oArea.ondragenter = function(){
oArea.innerHTML = "请释放鼠标";
}
oArea.ondragleave = function(){
oArea.innerHTML = "将图片拖放到该区域";
}
oArea.ondragover = function(ev){
            ev.preventDefault();
         }
oArea.ondrop = function(ev){
            ev.preventDefault();
             var files = ev.dataTransfer.files;
for(var i = 0 , len = files.length;i<len;i++){
var file = files[i];
var reader = new FileReader();
reader.readAsDataURL(file);
(function(reader){
reader.onload = function(){
var oImg = document.createElement("img");
oImg.src = this.result;
oPrev.appendChild(oImg);
}
})(reader);

}

}

}
</script>


注意：拖拽需要注意的是，阻止事件冒泡和事件默认行为，防止浏览器自动打开文件等行为。以上代码标红部分。

其实以上两个例子中已经用到了怎么读取文件文件的对象了。即：FileReader（可异步读取）

FileReader提供的方法：

readAsBinaryString(File|Blob)

readAsText(File|Blob [, encoding])

readAsDataURL(File|Blob)

readAsArrayBuffer(File|Blob)

FileReader提供的事件：

onloadstart

onprogress：onprogress事件中，提供了三个属性：lengthComputable（不为真，则event.total等于0）、loaded（已经传输的字节）、total（传输文件总字节）

onload：传输成功完成

onabort：传输被用户取消

onerror：传输中出现错误

onloadend：传输结束，但是不知道成功还是失败

文件分割：slice（）方法：可见本人博客，ajax大文件切割上传的例子。主要用到了slice（）、blob对象和FormData对象。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航