<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. Segment,Path,Ring和Polyline的区别

    这四者当中Segment是最小的单位,具体的构成路线可以分为两个条:Segment-Path-Ring(封闭的Path)Segment-Path-Polyline Segment 和 Path 可以说 ...

  2. 【转】C++:MessageBox的常见用法

    一    函数原型及参数 function MessageBox(hWnd: HWND; Text, Caption: PChar; Type: Word): Integer; hWnd:对话框父窗口 ...

  3. jQuery自学笔记(三):jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  4. CentOS(Linux) - SVN使用笔记(二) - 创建SVN仓库及下载仓库到本地

    1.安装: 参考文章 CentOS(Linux) - SVN使用笔记(一) -  安装SVN过程及开启和关闭svn服务指令 2.创建仓库 #创建项目目录 mkdir /usr/svn#进入目录cd / ...

  5. MySQL binlog_rows_query_log_events

    当binlog_format=statement的时候进制日志只记录的是SQL语句,当binlog_fromat=row的时候记录的是event,如果想要在row模式的情况下 也记录SQL语句:bin ...

  6. GoogLeNet学习心得

    转自:http://blog.csdn.net/liumaolincycle/article/details/50471289#t0 综述: http://blog.csdn.net/sunbaigu ...

  7. Chrome下的语音控制框架MyVoix.js使用篇(一)

    日前因工作需求,着手研究了语音识别技术,发现github上有网友发布了一款叫做voix.js的javascript框架.在拜读voix.js的源码后发现了不少问题,于是自己写了一款语音识别框架MyVo ...

  8. JUnit使用Eclipse建立Test Suite - 就是爱Java

    当JUnit有多个或所有的Test Case要执行,此时就需要Test Suite来管理众多的Test Case,利用Eclipse的整合开发环境,可以针对多个不相关的Test Case或Test S ...

  9. Effective Java Item4:Enforce noninstantiability with a private constructor

    Item4:Enforce noninstantiability with a private constructor 通过构造私有化,禁止对象被实例化. public class UtilClass ...

  10. VS环境下的makefile编译

    直接找这个了,原来VS也可以makefile,在windows上解析makefile的软件叫NMAKE.exe 打算用命令Cmake -G“NMake Makefiles” 生成VS环境下Nmake的 ...