如何在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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。