zoukankan      html  css  js  c++  java
  • JS预览图像将本地图片显示到浏览器上的代码

    js代码实现:

    从file域获取本地图片url并将本地图片显示到浏览器上。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    /**
    * 从 file 域获取 本地图片 url
    * 编辑:www.jbxue.com
    */
    function getFileUrl(sourceId) {
    var url;
    if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
    url = document.getElementById(sourceId).value;
    } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome
    url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));
    }
    return url;
    }
    
    /**
    * 将本地图片 显示到浏览器上
    * 编辑:www.jbxue.com
    */
    function preImg(sourceId, targetId) {
    var url = getFileUrl(sourceId);
    var imgPre = document.getElementById(targetId);
    imgPre.src = url;
    }
    </script>
    </head>
    <body>
    <form action="">
    <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
    <img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
    </form>
    </body>
    </html>
  • 相关阅读:
    Lucene的分页查询
    Lucene索引库的简单优化
    Lucene的排序搜索
    Axure RP 6.5学习记录(1)界面介绍
    Lucene的高亮器Highlighter
    关于Lucene以及索引和搜索的流程
    Lucene初体验
    linux 下 ansi_x3.41968 java 邮件附件乱码
    SQL Server DBA工作内容详解
    SQL Server 导出 insert into 脚本
  • 原文地址:https://www.cnblogs.com/study100/p/3282814.html
Copyright © 2011-2022 走看看