HTML5代码学习（9）文件操作-职坐标

HTML5代码学习（9）文件操作

沉沙 2018-11-06 来源：阅读 1063 评论 0

摘要：本篇教程探讨了HTML5代码学习（9）文件操作，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5代码学习（9）文件操作，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

之前我们操作本地文件都是使用flash、silverlight或者第三方的activeX插件等技术，由于使用了这些技术后就很进行跨平台的处理，另外就是让我们的web应用依赖了第三方的插件，而不是很独立，不够通用。在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。
在学习文件操作API之前，首先得认识几个比较重要的对象：
•FileList对象：是File对象的一个集合，在Html4标准中文件上传控件只接受一个文件，而在新标准中，只需要设置multiple，就支持多文件上传，所以从此标签中获取的files属性就是FileList对象实例。见备注
•Blob对象：指向文件的数据，其实就是一个数据块对象。有两个属性：size（数据的大小），type（MIME类型）
•File对象：继承自Blob对象，指向一个具体的文件，它还有两个属性：name（文件名), lastModifiedDate（最后修改时间)
FileReader对象：设计用来读取文件里面的数据，提供三个常用的读取文件数据的方法，另外读取文件数据使用了异步的方式，非常高效。
三个重要方法：
•void readAsBinaryString(Blob blob);//读取数据作为二进制字符串
•void readAsText(Blob blob, optional DOMString encoding);//文本
•void readAsDataURL(Blob blob);//读取as url
•void abort();//停止读取数据
•数据读取完毕后，直接放到result属性中，并触发onload事件。所以一般在onload事件中处理当前的读取文件的结果。
FileReader对象的事件：onload;onloadstart; onprogress;onabort; onerror;onloadend;

复制代码

<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function test() {
            var fl = document.getElementById("f").files;
            for (var i = 0; i < fl.length; i++) {
                var file = fl[i];
                var str = file.name + "--" + file.size + "--" + file.type;
                document.getElementById("d1").innerHTML += str + "<br>";
                var fr = new FileReader();
                fr.onload = function() {
                    var img = document.createElement("img");
                    img.src = this.result;
                    document.getElementById("imgs").appendChild(img);
                };
                fr.readAsDataURL(file);
            }
        }
    </script>
</head>
<body>
    <input id="f" type="file" multiple="multiple" />
     <input type="button" onclick="test()" value="test" />

    <div id="d1"></div>

    <div id="imgs"></div>
</body>
</html>