浅谈 HTML5 文件处理

作者: 游学者灬墨槿 | 来源:发表于2017-07-11 15:07 被阅读53次

HTML5 文件 API

File API 支持程度

FileList 对象与 file 对象

FileList 对象：表示用户选择的文件列表。通过添加 mulitiple 属性，file 控件内允许一次放置多个文件。
File 对象：控件内的每一个用户选择的文件。
- 属性：
  - name：文件名，不包括路径。
  - lastModifiedDate：表示文件的最后修改日期。
  - lastModified：表示当前时间与1970年的时间差(单位为毫秒)。
示例：

<body>
<script>
    function ShowFileName() {
        var file;
        // 获取 FileList 文件列表对象
        document.getElementById('file').files
        for(var loop = 0; loop < document.getElementById('file').files.length; loop++) {
            // file 对象为用户选择的单个文件
            file = document.getElementById('file').files[loop];
            alert(file.name);
            alert(file.lastModifiedDate);
        }
    }
</script>
    选择文件：
    <input type="file" id="file" multiple size="5" />
    <input type="button" onclick="ShowFileName();" value="文件上传" />
</body>

Blob 对象

概念：表示二进制原始数据。
继承关系：file 对象继承了 Blob 对象。
属性：
- size：表示一个 Blob 对象的字节长度。
- type：表示 Blob 的 MIME 类型，如果是未知类型，则返回一个空字符串。注意，对于图像类型的文件，Blob 对象的 type 属性都是以 “image/” 开头，后跟图像类型。我们可以利用此特性来判断用户选择的文件类型是否是我们想要用户选择。
- slice()：可以访问字节内部的原始数据库。
示例：

<body>
<script>
    function ShowFileName() {
        var file;
        // 获取 FileList 文件列表对象
        document.getElementById('file').files
        for(var loop = 0; loop < document.getElementById('file').files.length; loop++) {
            // file 对象为用户选择的单个文件
            file = document.getElementById('file').files[loop];
            alert(file.size);
            alert(file.type);
        }
    }
</script>
    选择文件：
    <input type="file" id="file" multiple size="5" accept="image/*" />
    <input type="button" onclick="ShowFileName();" value="文件上传" />
</body>

Blob 对象的 type 属性利用：

<script>
function FileUpload() {
    var file;
    for(var loop = 0; loop < document.getElementById('file').files.length; loop++) {
        file = document.getElementById('file').files[loop];
        if(!/image\/\w+/.test(file.type)) {
            alert(file.name + "不是图像文件！");
            break;
        } else {
            // 此处可加入文件上传的代码
            alert(file.name + "文件已上传");
        }
    }
}
</script>
选择文件：
<input type="file" id="file" multiple />
<input type="button" value="文件上传" onclick="FileUpload();" />

accept 属性：让 file 控件只能接受某种类型的文件。

<input type="file" id="file" accept="image/*" />

FileReader 接口

目的：把文件读入内存，并且读取文件中的数据。
简述：FileReader 接口提供了一个异步 API，使用该 API 可以在浏览器主线程中异步访问文件系统，读取文件中的数据。

// 检查浏览器是否对 FileReader 接口提供支持
if(typeof FileReader == 'undefined') {
    alert("您的浏览器未实现 FileReader 接口");
} else {
    var reader = new FileReader();
    // 正常使用浏览器
}

方法：

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制码
readAsText	file, [encoding]	将文件读取为文本
readAsDataURL	file	将文件读取为 DataURL
abort	(none)	中断读取操作

readAsText：该方法有两个参数，其中第二个参数是文本的编码方式，默认值为 UTF-8。将文件以文本方式读取，读取的结果即是这个文本文件中的内容。
readAsBinaryString：将文件读取为二进制字符串，通常将其传送给后端，后端可以通过这段字符串存储文件。
readAsDataURL：将文件读取为一串 Data URL 字符串。该方法事实上将小文件一种特殊格式的 URL 地址形式直接读入页面。这里的小文件通常是指图像与 html 等格式的文件。
事件：包含一套完整的事件模型，用于捕获读取文件时的状态。

事件	描述
onabort	数据读取中断时触发
onerror	数据读取出错时触发
onloadstart	数据读取开始时触发
onprogress	数据读取中触发
onload	数据读取成功完成时触发
onloadend	数据读取完成时触发，无论成功或失败

示例：

<script language="javascript">
var result = document.getElementById("result"),
    file = document.getElementById("file");
if(typeof FileReader == 'undefined') {
    result.innerHTML = "<p>抱歉，你的浏览器不支持 FileReader</p>";
    file.setAttribute('disabled', 'disabled');
}
// 将文件以 Data URL 形式读入页面
function readAsDataURL() {
    // 检查是否为图像文件
    var file = document.getElementById('file').files[0];
    if(!/image\/\w+/.test(file.type)) {
        alert("请确保文件为图像类型");
        return false;
    }
    var reader = new FileReader();
    // 将文件以 Data URL 形式读入页面
    reader.readAsDataURL(file);
    reader.onload = function(e) {
        var result = document.getElementById("result");
        // 在页面上显示文件
        result.innerHTML = '![](' + this.result + ')'; 
    }
}
// 将文件以二进制形式读入页面
function readAsBinaryString() {
    var file = document.getElementById('file').files[0],
        reader = new FileReader();
        
    reader.readAsBinaryString(file);
    reader.onload = function(f) {
        var result = document.getElementById('result');
        result.innerHTML = this.result;
    }
}
// 将文件以文本形式读入页面
function readAsText() {
    var file = document.getElementById('file').files[0],
        reader = new FileReader();
        
    reader.readAsText(file);
    reader.onload = function(f) {
        var result = document.getElementById('result');
        result.innerHTML = this.result;
    }
}
</script>
<p>
    <label>请选择一个文件：</label>
    <input type="file" id="file" />
    <input type="button" value="读取图像" onclick="readAsDataURL()" />
    <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" />
    <input type="button" value="读取文本文件" onclick="readAsText()" />
</p>
<div name="result" id="result">
    <!-- 这里用来显示读取结果 -->
</div>

注意：FileReader 对象读取到的数据都保存在 result 属性中。

<script language="javascript">
    var result = document.getElementById("result"),
        file = document.getElementById("file");
    if(typeof FileReader == 'undefined') {
        result.innerHTML = "<p>抱歉，你的浏览器不支持 FileReader</p>";
        file.setAttribute('disabled', 'disabled');
    }
    function readFile() {
        var file = document.getElementById('file').files[0],
            reader = new FileReader();
        reader.onload = function(e) {
            result.innerHTML = "![](" + this.result + ")";
            alert("load");
        };
        reader.onprogress = function(e) {
            alert("progress");
        };
        reader.onabort = function(e) {
            alert("abort");
        };
        reader.onerror = function(e) {
            alert("error");
        };
        reader.onloadstart = function(e) {
            alert("loadstart");
        };
        reader.onloadend = function(e) {
            alert("loadend");
        };
        reader.readAsDataURL(file);
        alert("load");
    }
</script>
<p>
<label>请选择一个图像文件：</label>
<input type="file" id="file" />
<input type="button" value="显示图像" onclick="readFile()" />
</p>
<div name="result" id="result">
<!-- 这里用来显示读取结果 -->
</div>

网友评论

Web前端之路

本文标题：浅谈 HTML5 文件处理

本文链接：https://www.haomeiwen.com/subject/pykmhxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

浅谈 HTML5 文件处理

HTML5 文件 API

FileList 对象与 file 对象

Blob 对象

FileReader 接口

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路