基于HTML5的移动Web应用——文件操作

过去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>