HTML5代码学习文件操作

Posted 2021-04-04 职坐标在线

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5代码学习文件操作相关的知识，希望对你有一定的参考价值。

本篇教程探讨了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="http://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>

------------------------------------------------------------------

更多关于web前端、Java、大数据、人工智能、物联网等学习资源请加小职微信获取：

长按二维码加小职吧

在线等你

以上是关于HTML5代码学习文件操作的主要内容，如果未能解决你的问题，请参考以下文章

jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo

H5读取本地文件操作

基于Html5 Plus + Vue + Mui 移动App开发-文件操作（读取保存更新数据）

大数据学习——java代码实现对HDFS文件的readappendwrite操作

笨办法学习python3练习代码：argv参数变量与文件操作

html5标签video（播放器）学习笔记-基本操作