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>
  • 相关阅读:
    k8s1.13.0二进制部署-Dashboard和coredns(五)
    一、服务器简介
    Java检测端口的占用情况
    GreenMail邮件测试服务器
    PowerMock简单使用
    源码-集合:ArrayList
    Maven初步接触
    Java测试工具和框架
    Git初步
    java+搜索引擎
  • 原文地址:https://www.cnblogs.com/study100/p/3282814.html
Copyright © 2011-2022 走看看