文件系统
File API主要接口说明
对象 接口
FileList FileList[index] 得到第index个文件
Blob size 只读特性，数据的字节数
Blob slice(start，length) 将当前文件切割并将结果返回
File API---FileReader方法
对象FileReader的四个接口方法
--readAsBinaryString(blob,file)
--readAsText(file,[encoding])
--readAsDataURL(file)
--abort()
File API---FileReader事件
对象FileReader的八个事件
--onloadstart
--onload
--onloadend
--onprogress(读取操作过程中触发)
--onabort
--onerror
--result(读取的结果二进制、文本、dataURL格式)
--readyState(读取操作的状态EMPTY\LOADING\DONE)
判断浏览器是否支持
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
</head>
<body>
<style type="text/css">
#content{width:600px; height:300px; border: 1px solid #ddd;
overflow: auto; margin-top:10px;}
</style>
<script type="text/javascript">
function isSupportFileApi() {
if(window.File && window.FileList && window.FileReader && window.Blob) {
return true;
}
return false;
}
</script>
</body>
</html>
1.表单输入选择文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#fileContent{
width:600px;
height:300px;
border: 1px solid #ddd;
overflow: auto;
margin-top:10px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var filevar = document.getElementById("fileinput");
var contentvar = document.getElementById("fileContent");
filevar.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;
contentvar.insertBefore(div, null);
};
})(file);
reader.readAsText(file,"gb2312");
}
}, false);
}
</script>
</head>
<body>
<input type="file" name="" id="fileinput" value="" multiple="multiple" />
</body>
<div id="fileContent"></div>
</html>
2.拖曳选择文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#dragarea{width:100%;height:200px; line-height: 200px; text-align: center;
border: 1px solid #DDDDDD;}
#preview{width:100%;min-height: 400px; border: 1px solid #FF0000;}
</style>
<script type="text/javascript">
window.onload = function(){
var vArea = document.getElementById("dragarea");
var vPrev = document.getElementById("preview");
vArea.ondragenter = function(){
vArea.innerHTML = "请释放鼠标";
}
vArea.ondragleave = function(){
vArea.innerHTML = "将图片拖放到此区域";
}
vArea.ondragover = function(ev){
ev.preventDefault();
}
vArea.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 vImg = document.createElement("img");
vImg.src = this.result;
vPrev.appendChild(vImg);
}
})(reader);
}
}
}
</script>
</head>
<body>
<div id="dragarea">将图片拖放到此区域</div>
<h1>图片预览</h1>
<hr>
<div id="preview"></div>
</body>
</html>
