<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. centos 系统下查看时间时区以及修改

    1.系统时间查看及修改: Centos 6 查看系统时间:# date

  2. python之用户登陆作业

    实现一个用户登陆的小程序,如果密码错误,可以重试三次,如果三次均错误,则锁定 数据库如下格式,分别用户名|密码|锁定,其中锁定字段0为正常,1为被锁定 root|admin123|0 admin|ad ...

  3. LeetCode包括main函数的答题框架(Java+Eclipse)

    http://zhangnai.xin/2016/09/20/LeetCode-Framework/ 目录结构: LeetCode ——项目名称,方便Eclipse内置Git对代码进行管理和多终端同步 ...

  4. HashMap的hash冲突解决方案

    Hash函数 非哈希表的特点:关键字在表中的位置和它之间不存在一个确定的关系,查找的过程为给定值一次和各个关键字进行比较,查找的效率取决于和给定值进行比较的次数. 哈希表的特点:关键字在表中位置和它之 ...

  5. DB2事务日志

    1.DB2数据库的日志原理 事务日志记录数据库中所有对象和数据的改变,在早前版本中最大可达256G,其大小为( logprimary + logsecond ) * logfilsiz,其中logpr ...

  6. PAT 1082 射击比赛(20)(代码+思路)

    1082 射击比赛(20 分) 本题目给出的射击比赛的规则非常简单,谁打的弹洞距离靶心最近,谁就是冠军:谁差得最远,谁就是菜鸟.本题给出一系列弹洞的平面坐标(x,y),请你编写程序找出冠军和菜鸟.我们 ...

  7. [PHP] constant variable

    print: 3.13 PI 3.14

  8. Codeforces 689C. Mike and Chocolate Thieves 二分

    C. Mike and Chocolate Thieves time limit per test:2 seconds memory limit per test:256 megabytes inpu ...

  9. laravel的foreach

    1.控制器 2.模板

  10. Socket-IO 系列(三)基于 NIO 的同步非阻塞式编程

    Socket-IO 系列(三)基于 NIO 的同步非阻塞式编程 缓冲区(Buffer) 用于存储数据 通道(Channel) 用于传输数据 多路复用器(Selector) 用于轮询 Channel 状 ...