HTML5 file API

HTML5新增了file API(IE10+),为文件的操作提供了更大的便捷性。

一、File API的四大接口

  1. Blob
    只包含原始文件的类文件对象,用来存储二进制类型的数据。
    属性:
    文件大小size,文件类型type

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blobtitle>
    <script>
        function showFileInfo() {
            var file = document.getElementById('file').files[0];
            //获取fileList列表的第一个文件
            var size = document.getElementById('size');
            var type = document.getElementById('type');
            size.innerHTML = file.size;   
            type.innerHTML = file.type;
        }
    script>
head>
<body>
<input type="file" id="file" multiple />

<input type="button" onclick="showFileInfo()" value="上传文件" />
<br />
文件大小: <span id="size">span>
<br/>
文件类型: <span id="type">span>
body>
html>
  1. File
    File包含了文件的各种信息(如文件名name,文件大小size,文件类型type),继承自Blob对象
  2. FileList
    FileList是一个Array类型的文件组合,包含多个File对象
  3. FileReader
    FileReader用于文件读取的构造函数,实例可以有多种方式读取文件(如:readAsText)

二、读取文件

  1. 读取文本文件
    readAsText只能读取文本文件,不能读取二进制文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>readAsTexttitle>
    <script>
        function readAsText() {
            var file = document.getElementById('file').files[0];
            var result = document.getElementById('result');
            var reader = new FileReader();  //创建一个FileReader对象
            reader.readAsText(file); //以text文本的方式读取文件内容
            reader.onload = function() {
                result.innerHTML = this.result;
            }
        }
    script>
head>
<body>
<input type="file" id="file" multiple />
<input type="button" onclick="readAsText()" value="上传文件" />
<div id="result">div>
body>
html>
  1. 读取DataUrl

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>readAsDataUrltitle>
    <script>
        var files = document.getElementById('file');
        var result = document.getElementById('result');
        function readAsDataUrl() {
            var file = document.getElementById('file').files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);    //以DataUrl的方式读取文件内容
           reader.onload = function(e) {
                var resultImg = document.getElementById('result');
                resultImg.innerHTML = 'this.result + '"/>';
            }
        }
    script>
head>
<body>
<input type="file" id="file" multiple />
<input type="button" onclick="readAsDataUrl()" value="上传文件" />
<div id="result">div>
body>
html>

获取的文件FileList有files属性,可以用来获取文件列表中的文件及其相关信息

三、文件上传

1.FileList显示多个文件信息


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fileListtitle>
    <script>
        function showFileName() {
            var files = document.getElementById('file');
            for(var i=0;ivar file = files.files[i];
                console.log(file.name);
            }
        }
    script>
head>
<body>
<input type="file" id="file" multiple />
<input type="button" value="文件上传" onclick="showFileName()" />
body>
html>

2.上传图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fileFiltertitle>
    <script>
        function fileUpload() {
            var files = docuemnt.getElementById('file');
            for(var i=0;ivar file = files.files[i];
                //判断上传的是否是图片类型
                if(!/image\/\w+/.test(file.type)) {
                    alert('上传的文件为非图片类型!');
                } else {
                    alert('上传成功');
                }
            }
        }
    script>
head>
<body>
<input type="file" id="file" multiple />
<input type="button" onclick="fileUpload()" value="上传文件" />
body>
html>

案例来自极客学院HTML5视频系列 File API
参考文件:MDN :在WEB中使用文件

你可能感兴趣的:(HTML)