<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. AngularJs练习Demo15自定义服务

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  2. SignalR2.0开发实例之——负载均衡

    SignalR 2.0作为一个新的而且强大的通信工具,发布博客之后得到了很多人的支持,谢谢...也有人对性能和架设等问题提出了各种质疑..真的很感谢.. 我特意下载了SignalR 2.0的源码硬着头 ...

  3. jq不识别拼接的对象id的解决方案

    今天在做项目时,遇到了这么个问题. 先声明一下,我的id都是动态变换的.从1-10呢. <div id="a1"></div> <div id=&qu ...

  4. (一)chrome扩展 - API小记

    browserAction 设置browser action的badge文字,badge 显示在图标上面 chrome.browserAction.setBadgeText({text:"i ...

  5. Assimp场景模型输出Collada,STL,3DPDF

    本文介绍开源库模型的几种输出格式:DAE,STL,3DPDF. Assimp是C++写的,AssimpNet是C#重构其中主要数据结构,并开通Assimp中重要方法的调用接口,为不熟悉C++的码农带来 ...

  6. 一个小玩具:Python调用Mysql

    1. ubuntu安装MySQL how to install:$ sudo apt-get install mysql-server$ sudo apt-get install mysql-clie ...

  7. MySQL 大DML操作建议

    ㈠ 大数据量INSERT          ⑴ 使用多行插入代替单行:insert into t values (),(),(),...          ⑵ LOAD DATA INFILE ... ...

  8. JQuery获取当前屏幕的高度宽度

    JQuery获取浏览器窗口宽高,文档宽高的代码,使用jquery的朋友可以参考下. <script type="text/javascript"> $(document ...

  9. IE6、火狐不支持a:visited

    今天做个样式,想让超链接点击后变成灰色,可发现IE里是没问题,可火狐就全灰色的.我测试了好几遍,发现不是顺序的问题.当然可以在火狐里地址栏里输入about:config.可总不能让用户去那里改吧.以下 ...

  10. Css 应用一

    Placeholder使用 CSS3里有相应的通用的对Placeholder提示信息美化的方法.你可以设置提示信息文字的颜色,透明度,背景色等. 为了最大化的兼容所有浏览器,给CSS里的placeho ...