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>
  • 相关阅读:
    PostMan使用教程(1)
    测试工作量的评估方法
    Jmeter之Bean shell使用(二)
    centos7 编译安装redis
    Centos7 安装mariadb
    Centos7 安装使用virtualenvwrapper
    Centos7安装python3.6
    linux基础命令2
    linux基础命令
    linux目录结构
  • 原文地址:https://www.cnblogs.com/study100/p/3282814.html
Copyright © 2011-2022 走看看