zoukankan      html  css  js  c++  java
  • 如何在HTML5 图片预览

    HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能。

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

    1.Blob接口,表示原始的二进制数据,通过它可以访问到文件的大小和字节数据

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

    3.FileList,一个File文件组成的数组,表示用户通过<input type="file" multiple/>选择的文件(multiple表示支持文件多选)

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

    5.FileError、FileException,错误模型

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

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

    我们知道通过data URI scheme,我们可以直接将图片数据传给img进行显示,而FileReader的readAsDataURL方法正好可以返回这种数据。

    下面看代码:

    <!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-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>
  • 相关阅读:
    2017《面向对象程序设计》课程作业八
    2017《面向对象程序设计》课程作业七
    第六次作业
    2017《面向对象程序设计》课程作业五
    课程作业四
    2017《面向对象程序设计》课程作业三
    2017《面向对象程序设计》课程作业二
    2017《面向对象程序设计》课程作业一
    20200924 次小生成树
    水文章_考拉
  • 原文地址:https://www.cnblogs.com/sunheyubo/p/4911629.html
Copyright © 2011-2022 走看看