HTML5 file API

最新推荐文章于 2024-03-11 15:00:43 发布

木子PZ

最新推荐文章于 2024-03-11 15:00:43 发布

阅读量616

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/sinat_24044741/article/details/53001979

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML5新增了file API（IE10+），为文件的操作提供了更大的便捷性。

一、File API的四大接口

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>blob</title>
    <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 />
<!--multiple属性即支持多文件上传 -->
<input type="button" onclick="showFileInfo()" value="上传文件" />
<br />
文件大小： <span id="size"></span>
<br/>
文件类型： <span id="type"></span>
</body>
</html>

File
File包含了文件的各种信息（如文件名name，文件大小size，文件类型type），继承自Blob对象
FileList
FileList是一个Array类型的文件组合，包含多个File对象
FileReader
FileReader用于文件读取的构造函数，实例可以有多种方式读取文件（如：readAsText）

二、读取文件

读取文本文件
readAsText只能读取文本文件，不能读取二进制文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>readAsText</title>
    <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>

读取DataUrl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>readAsDataUrl</title>
    <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 = '<img src="' + 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显示多个文件信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fileList</title>
    <script>
        function showFileName() {
            var files = document.getElementById('file');
            for(var i=0;i<files.files.length;i++) {
                var 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.上传图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fileFilter</title>
    <script>
        function fileUpload() {
            var files = docuemnt.getElementById('file');
            for(var i=0;i<files.files.length;i++) {
                var 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>