<script type="text/javascript">
    function DisplayImage(fileTag) {
        document.getElementById('viewfile').value = fileTag.value;
        fileTag.style.display = 'none';
        var allowExtention = ".jpg.png.gif.JPG.PNG.GIF";
        var extentionArr = fileTag.value.split('.');
        var extention = extentionArr[extentionArr.length - 1];
        if (!(allowExtention.indexOf(extention) > -1)) {
            alert("请选择图片!");
        } else {
            //for adveced broswer(the newest ie,chrome,ff)
            if (typeof (FileReader) !== "undefined") {

var reader = new FileReader();
                reader.readAsDataURL(fileTag.files[0]);
                reader.onload = function (e) {
                    document.getElementById("img_1").setAttribute("src", e.target.result);
                }
            } else {
                //for(ie6)
                document.getElementById("img_1").setAttribute("src", fileTag.value);
            }
        }
    }
</script>

JS——图片预览功能的更多相关文章

  1. JS 图片预览功能

    <script type="text/javascript">    function DisplayImage(fileTag) {        document. ...

  2. 如何通过js实现图片预览功能

    一.效果预览 效果图: 二.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  3. H5图片预览功能

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. 原生JS实现图片预览功能

    html代码: <div class="album-new fr"> <div class="upload-btn btn-new container& ...

  5. 原生js实现ajax的文件异步提交功能、图片预览功能.实例

    采用html5使得选择图片改变时,预览框中图片随之改变.input文件选择框美化.原生js完成文件异步提交 效果图: 代码如下,可直接复制并保存为html文件打开查看效果 <html> & ...

  6. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  7. HTML5实现图片预览功能

    两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UT ...

  8. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  9. 自定义type为file型input控件+该控件具有本地图片预览功能

    最近的一个项目需求是写一个type为filex型的input控件,这个控件: 第一,要自定义样式: 第二,要能直接在本地预览上传的图片: 第三,要能检测图片的尺寸是否符合要求. 故综合网上的资源写了下 ...

随机推荐

  1. 二叉树的创建、遍历(递归和非递归实现)、交换左右子数、求高度(c++实现)

    要求:以左右孩子表示法实现链式方式存储的二叉树(lson—rson),以菜单方式设计并完成功能任务:建立并存储树.输出前序遍历结果.输出中序遍历结果.输出后序遍历结果.交换左右子树.统计高度,其中对于 ...

  2. obstacle

    obstacle - 必应词典 美[ˈɑbstək(ə)l]英[ˈɒbstək(ə)l] n.障碍:障碍物:阻碍:绊脚石 网络妨碍:干扰:妨害

  3. centos7,Python2.7安装request包

    1.安装epel扩展源:“sudo yum install epel-release” 2.安装python-pip:“sudo yum install python-pip” 3.升级pip:“su ...

  4. python内置函数之attr【反射】

    #Auther Bob#--*--conding:utf-8 --*-- #我们来循序渐进的学习反射 import s1 #阶段1# def run():# url = input("请输入 ...

  5. 14-n皇后

    /*题目内容: 国际象棋中的皇后可以沿着水平线,垂直线,或者斜线前进,吃掉遇到的所有棋子,如果棋盘上有八个皇后,则这八个皇后如何相安无事的放置在棋盘上,1970年与1971年, E.W.Dijkstr ...

  6. 2017年UX设计流行的六大趋势

    UX设计在接下来的2017年会有怎样的发展趋势呢?让我们一起回顾去年用户体验设计领域中的变化,来展望新一年用户体验设计的发展趋势吧. 1. 原型制作的爆炸性增长   随着用户体验设计师和用户界面设计师 ...

  7. break MISSING_BLOCK_LABEL_160; 看源代码出现的,源代码是反编译的

    break MISSING_BLOCK_LABEL_160; FileNotFoundException fnfe; fnfe; out.close(); throw fnfe; in.close() ...

  8. powerdesigner 生成表备注

    第一步: 操作:Database-->Edit Current DBMS,进入下图页面, 然后分别将 Script-->Objects-->Table-->TableComme ...

  9. Mybatis传值为空需要配置JdbcType来解决吗?(XML文件不需要配置JdbcType)

    1,解决思路,配置自定义的语言驱动,重写自己的Paramethander package cn.com.servyou.gxdqy.tool.xmlhelper; import org.apache. ...

  10. 【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

    应用场景 App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载.从而形 ...