一 File对象与FileList对象

当将input元素的type类型设置为file时，web页面上会显示一个选择文本按钮和一个文本显示框，单击文件按钮可以选择一个文件，文本显示框中会显示选中的文件名称。

input元素设置multiple属性，可以选择多个文件，文本显示框中会显示选中了几个文件。

在这个过程中，用户选中的每一个对象都是一个file对象，用户选中的对个对象的集合就是fileList对象。File对象有两个属性，name属性表示文件名，但不包含文件的路径；

lastModifiedDate属性表示文件的最后修改的日期。

multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script type="text/javascript">

         function show(){

             var file,filelist,mySpan;

             file=document.getElementById("file");

             filelist=file.files;

             mySpan=document.getElementById("mySpan");

             var names="";

             for(var i=0;i<filelist.length;i++){

                 names+=filelist[i].name+"<br />";

             }

             mySpan.innerHTML=names;

         }

     </script>

 </head>

 <body>

     <input type="file" id="file" multiple />

     <input type="button" onclick="show();" value="上传文件" /><br />

     <span id="mySpan">文件名字</span>

 </body>

 </html>

二FileReader对象：读取文件里面的数据

FileReader对象用于读取文件里面的数据，并将这些数据读入内存。根据文件类型，可以选择不同的读取文件，并在异步读取文件的过程中触发多个事件。

1.FileReader对象

HTML5中的FileReader对象一共有4个方法，readAsBinaryString以二进制方式读取文件，readAsText以文本方式读取文件，readAsDateURL以DateURL方式读取文件，abort方法是中断读取操作。FileReader对象有一个result属性，用于存储读取文件的结果。

2.fileReader对象的事件

FileReader对象在异步读取文件时会触发很多事件，根据不同的事件处理不同的操作，可以使程序更加人性化和健壮。

3.以二进制方式读取文件

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>7.3.1</title>

<script language="javascript">

//以二进制方式读入文件

function fileBinary()

{

    var myDiv=document.getElementById("myDiv");

    //判断浏览器是否支持FileReader

if(typeof FileReader=="undefined")

    {

        myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";

        return false;

    }

    var file=document.getElementById("file").files[0];

    var reader=new FileReader();

    //以二进制方式读入文件

    reader.readAsBinaryString(file);

    reader.onload =function(e)

    {

        myDiv.innerHTML=this.result;

    }

}

</script>

</head>

<body>

<input type="file" id="file" />

<input type="button" onClick="fileBinary();" value="二进制读取文件" />

<div id="myDiv" name="myDiv"></div>

</body>

</html>

4.以文本的方式读取文件

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>7.3.2</title>

<script language="javascript">

//以文本方式读取文件

function fileText()

{

    var myDiv=document.getElementById("myDiv");

    //判断浏览器是否支持FileReader

if(typeof FileReader=="undefined")

    {

        myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";

        return false;

    }

    var file=document.getElementById("file").files[0];

    var reader=new FileReader();

    //以文本方式读取文件

reader.readAsText(file);

    reader.onload=function(e)

    {

        myDiv.innerHTML=this.result;

    }

}

</script>

</head>

<body>

<input type="file" id="file" />

<input type="button" onClick="fileText();" value="文本读取文件" />

<div id="myDiv" name="myDiv"></div>

</body>

</html>

5.以DateURL方式读取文件

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>7.3.3</title>

<script language="javascript">

//以DataURL方式读取文件

function fileDataURL()

{

    var myDiv=document.getElementById("myDiv");

    //判断浏览器是否支持FileReader

if(typeof FileReader=="undefined")

    {

        myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";

        return false;

    }

    var file=document.getElementById("file").files[0];

    //判断文件类型

if(!/image\/\w+/.test(file.type))

    {

        myDiv.innerHTML="<h2>请选择图像文件！</h2>";

        return false;

    }

    var reader=new FileReader();

    //以DataURL方式读取文件

reader.readAsDataURL(file);

    reader.onload=function(e)

    {

        myDiv.innerHTML="<img src='"+this.result+"' />";

    }

}

</script>

</head>

<body>

<input type="file" id="file" />

<input type="button" onClick="fileDataURL();" value="DataURL读取文件" />

<div id="myDiv" name="myDiv"></div>

</body>

</html>

三.FileSystem对象

1.FileSystem对象介绍

FileSystem的主要功能有以下三个方面

①读取和处理文件：file/Blob、FileList、FileReader。

②创建和写入：BlobBuilder、FileWriter

③目录和文件系统访问：DirectoryReader、FileEntry/DirectoryEntry、LocalFileSystem。

2.请求文件系统

基于安全原因，Web应用通过浏览器的脚本去操作本地文件，首先需要获取操作许可，否则通过浏览器可以随意修改本地文件的是非常不安全的。通过调用Window.requestFileSystem()方法可以请求对文件系统的访问权限。

Window.requestFileSystem()方法需要4个参数，各参数的含义如下所示：

①type文件存储是否应该持久。如果设置为window.TEMPORARY,当浏览器需要更多空间时可自行决定是否删除该文件；如果设置为window.PERSISTENT,则需要获取用户或应用的明确授权才可以删除。

②size指定请求文件的大小，以字节为单位。

③successCallback 当文件系统请求成功后的回调函数，参数为FileSystem对象。

④errorCallback 当文件系统请求失败或错误时的回调函数，参数为FileError对象。

注意 ：首次调用window.requestFileSystem()对象时，系统为应用创建一个沙箱文件，并为其指定一个名称。

HTML5中File的更多相关文章

  1. html5中新增的form表单属性

    html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...

  2. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  3. HTML5中的二进制大对象Blob（转）

    HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...

  4. html5中关于input使用方法的改变

    測试环境:Firefox 10.0.Safari 5.1.Opera 11.61, Chrome 14.0.835.202 自己測试的时候都有写在form表单里,有提交button验证.由于对博客使用 ...

  5. html5 文件系统File API

    前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...

  6. HTML5中常用的标签(及标签的属性和作用)

    1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...

  7. 认识HTML5中的新标签与新属性

    前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...

  8. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  9. html5中input的type类型有哪些（总结）

    html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...

随机推荐

  1. 你需要知道的Linux安全

    1. 账号以及密码一定要复杂,密码需要符合这些规范:字符大于 10 个:至少包含大小写以及数字:密码中不能包含账号,不能包含自己的姓名全拼,不能有自己的生日数字,不能有自己的电话号码:密码要定期更换: ...

  2. mongodb & macOS

    mongodb & macOS https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/ https://stacko ...

  3. POJ 3348 最直接的凸包问题

    题目大意: 给定一堆树的点,找到能组合成的最大面积,一个物体占50面积,求最多放多少物体 #include <cstdio> #include <cstring> #inclu ...

  4. webstrom设置代码缩进四个空格

    言,今天在github上拉了一份代码,发现代码缩进是2个空格,不习惯.找到了解决方案. 一.File ---> Settings 搜索Code Style,取消勾选使用现文件的缩进方式,见下图. ...

  5. Android GIS开发系列-- 入门季（11） Callout气泡的显示

    一.气泡的简单显示 首先我们要获取MapView中的气泡,通过MapView的getCallout()方法获取一个气泡.看一下Callout的简单介绍: 大体的意思是通过MapView获取Callou ...

  6. NA路由①

    Cisco设备的端口:     在Cisco的路由器上都有一个带外网管口(Console/AUX):     Con口主要用于本地的con线进行本地网管:     AUX口主要与Modem连接通过固话 ...

  7. jQuery的DOM操作之捕获和设置

    .html()--获取或设置目标元素内的全部内容,包括html的标签及属性在内: .text()--仅获取或设置目标元素内的文本内容. .val()--获取输入框的值: .attr()--获取或设置目 ...

  8. Angular CLI: 1.6.7 入门

    当你使用npm或者yarn也安装不了angular-cli时,请使用淘宝镜像. Step1 npm i -g cnpm --registry=https://registry.npm.taobao.o ...

  9. HDU 5402 Travelling Salesman Problem (构造)（好题）

    大致题意:n*m的非负数矩阵,从(1,1) 仅仅能向四面走,一直走到(n,m)为终点.路径的权就是数的和.输出一条权值最大的路径方案 思路:因为这是非负数,要是有负数就是神题了,要是n,m中有一个是奇 ...

  10. 创建类模式大PK(总结)

    创建类模式包含工厂方法模式.建造者模式.抽象工厂模式.单例模式和原型模式,它们都可以提供对象的创建和管理职责.当中的单例模式和原型模式很easy理解,单例模式是要保持在内存中仅仅有一个对象,原型模式是 ...