一 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. Git--使用须知123

    详细的篇幅以后补充 安装篇: 设置篇: 由于我们大多数是windows程序员,那么,在使用git的过程前需要做一些设置项. 1.换行符自动转换. 查看:git config --global --li ...

  2. word 给段落添加背景色

    word 2007 单击"页面布局"选项卡->单击"页面背景"一栏中的"页面边框"->(弹出边框与底纹对话框)->点击底纹 ...

  3. CodeForcesGym 100524A Astronomy Problem

    Astronomy Problem Time Limit: 8000ms Memory Limit: 524288KB This problem will be judged on CodeForce ...

  4. Leetcode 139.单词拆分

    单词拆分 给定一个非空字符串 s 和一个包含非空单词列表的字典 wordDict,判定 s 是否可以被空格拆分为一个或多个在字典中出现的单词. 说明: 拆分时可以重复使用字典中的单词. 你可以假设字典 ...

  5. [codeforces494B]Obsessive String

    [codeforces494B]Obsessive String 试题描述 Hamed has recently found a string t and suddenly became quite ...

  6. mysql启服务的时候报1067错误解决办法

    网上百度了半天没有有效的办法,推荐一个万能的办法: 1.看日志: mysql安装目录下  data文件 ->  后缀为.err 的文件就是日志文件  打开它   :  可以看到错误信息 2.看错 ...

  7. SQL SERVER示例：修改自定义数据类型精度

    /*--修改自定义数据类型精度的示例      自定义数据类型一旦被引用,就不能再修改和删除,如果要修改数据的精度,就非常麻烦,下面的示例演示了如何修改      假设要修改的自定义变量名为aa -- ...

  8. [bzoj2229][Zjoi2011]最小割_网络流_最小割树

    最小割 bzoj-2229 Zjoi-2011 题目大意:题目链接. 注释:略. 想法: 在这里给出最小割树的定义. 最小割树啊,就是这样一棵树.一个图的最小割树满足这棵树上任意两点之间的最小值就是原 ...

  9. Maximum Product Subarray(最大连续乘积子序列)

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  10. 洛谷 P2033 Chessboard Dance

    P2033 Chessboard Dance 题目描述 在棋盘上跳舞是件有意思的事情.现在给你一张国际象棋棋盘和棋盘上的一些子以及你的初始位置和方向.求按一定操作后,棋盘的状态. 操作有四种,描述如下 ...