首页 > 代码库 > HTML5中File

HTML5中File

2024-08-31 05:32:53   222人阅读

一 File对象与FileList对象

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

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

     

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

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript">
 7 
 8         function show(){
 9             var file,filelist,mySpan;
10             file=document.getElementById("file");
11             filelist=file.files;
12             mySpan=document.getElementById("mySpan");
13             var names="";
14             for(var i=0;i<filelist.length;i++){
15                 names+=filelist[i].name+"<br />";
16 
17             }
18             mySpan.innerHTML=names;
19         }
20     </script>
21 </head>
22 <body>
23     <input type="file" id="file" multiple />
24     <input type="button" onclick="show();" value="上传文件" /><br />
25     <span id="mySpan">文件名字</span>
26 </body>
27 </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=http://www.mamicode.com/‘"+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


联系
我们