如何在HTML5 图片预览

时间 2019-12-01

标签如何 html5 html 图片预览栏目 HTML5 繁體版

原文原文链接

HTML5的 File API容许浏览器访问本地文件系统，借助它咱们能够实现之前没法实现的本地图片预览功能。javascript

先介绍下该API实现了那些接口：html

1.Blob接口，表示原始的二进制数据，经过它能够访问到文件的大小和字节数据html5

2.File接口，保存着文件的只读属性信息，如文件名，文件类型，文件数据访问的地址。java

3.FileList，一个File文件组成的数组，表示用户经过<input type="file" multiple/>选择的文件（multiple表示支持文件多选）数组

4.FileReader接口，它提供了读取一个文件数据的若干方法和事件浏览器

5.FileError、FileException，错误模型ui

本代码由www.niyuewo.com同城交友网提供this

详细接口参考 http://www.w3.org/TR/2009/WD-FileAPI-20091117/spa

咱们知道经过data URI scheme，咱们能够直接将图片数据传给img进行显示，而FileReader的readAsDataURL方法正好能够返回这种数据。code

下面看代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html5 example: IMG Preview</title>
</head>
<body>
<div><input id="viewFiles" type="file"/></div>
<img id="viewImg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" style="max-width:500px"/>
<script type="text/javascript">
(function () {
    var viewFiles = document.getElementById("viewFiles");
    var viewImg = document.getElementById("viewImg");
    function viewFile (file) {
        //经过file.size能够取得图片大小
        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg.src = evt.target.result;
        }
        reader.readAsDataURL(file);
    }
    viewFiles.addEventListener("change", function () {
        //经过 this.files 取到 FileList ，这里只有一个
        viewFile(this.files[0]);
    }, false);
})();
</script>
</body>
</html>