过去Web程序不能替代桌面程序的一个重要原因就在于浏览器对于文件操作API的缺失。照片处理中的裁剪、滤镜，二维码的读取与识别，文档的查看和编辑等，这些操作无一不依赖文件的操作，HTML5赋予了浏览器几乎和本地程序同等强大的文件操作能力。
File API是HTML5在DOM标准中添加的功能，它允许Web内容在用户授权的情况下选择本地文件并读取内容一通过 File，FileList 和FileReader等对象共同作用来实现。
选择文件
1、通过表单选择文件
由于Web环境的特殊性，为了考虑文件安全问题，浏览器不允许JavaScript直接访问文件系统，但可以通过file类型的input元素或者拖放的方式选择文件操作。
<input type="file" id="thisFile"/>
File表单可以让用户选取一个或者多个文件(multiple 属性)，通过FileAPI，可在用户选择文件后访问到代表了所选文件列表的FileList对象，FileList 对象是一个类数组的对象，其中包含着一个或多个File对象。如果没有multiple属性或者用户只选了一个文件，那么只需要访问FileList对象的第一个元素：
var filelist=document.getElementById('thisFile') .files;
var selectedFile-filelist[0];
使用input元素时，用户在选择文件后会触发其change事件：
var inputElement=document.getElementById('thisFile')
inputElement. addEventListener ("change"，handleFiles, false)
function handleFiles(){
var fileList=this.files
}
和其他类数组对象一样，FileList 也有length属性，可以轻松遍历其File对象：
for (var i=0, numFiles=files.length ; i< numFiles; i++) {
var file=files[i]
……
}
File对象有3个很有用的属性，包括了关于该文件的许多有用信息。
(1) name: 文件名，不包含路径信息。
(2) size: 文件大小，以B为单位。
(3) type:文件的MIME type。
需要注意的是，这3个属性都是只读的。
2、通过拖曳来选择文件
使用拖曳的方式来选择文件的效果，需要通过访问dataTransfer的files属性来实现。
下面通过一个案例来演示具体效果，如示例所示。
【示例】 使用拖曳的方式选择文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.dropzone{
width: 200px;
height: 100px;
border: 2px dashed #ddd;
text-align: center;
padding-top: 100px;
color: #999;
}
</style>
<body>
<div id="dropzone" class="dropzone">
拖曳文件到此处
</div>
<div id="output" class="output">
</div>
<script>
function getFileInfo(file) {
var aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], sizeinfo;
var info = '文件名：' + file.name ;
// 计算文件大小的近似值
for (var nMultiple = 0, nApprox = file.size / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sizeinfo = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + file.size + " bytes)";
}
info += "；大小：" + sizeinfo
info += "；类型：" + file.type
return info + '<br>'
}
var dropzone = document.getElementById('dropzone');
dropzone.addEventListener('drop', function (e) {
var html = '您一共选择了 ' + e.dataTransfer.files.length + '个文件，文件信息如下：<br>';
[].forEach.call(e.dataTransfer.files, function (file) {
html += getFileInfo(file);
});
document.getElementById('output').innerHTML = html
e.preventDefault();
e.stopPropagation();
}, false);
dropzone.addEventListener('dragover', function (e) {
if (e.preventDefault) {
// 必须要阻止dragover的默认行为（即不可drop），这样才能进行drop操作。
// 否则不会触发drop事件
e.preventDefault();
}
return false
}, false)
</script>
</body>
</html>
3669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
