<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. 关于javascript中setTimeout()和clearTimeout()的疑惑。

    由于在w3school中学习javascript时,当学到setTimeout()和clearTimeout()方法时.根据它所提供的例子(下面的代码转自w3cschool)—计数程序,发现当你不停的 ...

  2. nodejs+chromium 创建桌面应用程序

    直接用nodejs+javascript+html+css也可以创建桌面应用程序啦,前端开发的同学应该都比较感兴趣. 生成的应用程序自带nodejs环境和chrome浏览器环境. github的ato ...

  3. notepad++搜索结果不显示line XX的方法

    在使用notepad++如果多次搜索,得到的结果中会出现多次line xx: line xx:,造成文件大量垃圾信息的存在,不利于找寻所需的内容,如下图.                对于这种情况, ...

  4. C程序设计语言练习题1-3

    练习1-3 修改温度转换程序,使之能在转换表的顶部打印一个标题. 代码如下: #include <stdio.h> // 包含标准库的信息. int main() // 定义名为main的 ...

  5. C语言之链表————(转载)

    #include <stdio.h>#include <malloc.h>#define LEN sizeof(struct student) /*-------------- ...

  6. epoll函数及三种I/O复用函数的对比

    epoll函数 #include <sys/epoll.h>int epoll_create(int size)int epoll_ctl(int epfd, int op, int fd ...

  7. 使用 ExpandableListView 实现折叠ListView

    1:layout/expandablelistview_groups.xml 标题文件 <?xml version="1.0" encoding="utf-8&qu ...

  8. C# 代码转换到Python

    下载地址:http://pan.baidu.com/s/1dDAZJxv SharpDevelop 3.1 now supports converting C# and VB.NET code to ...

  9. java基础进阶:SQL的运用

    SQL的基础的运用 /* --1.学生表 Student(S,Sname,Sage,Ssex) --S 学生编号,Sname 学生姓名,Sage 出生年月,Ssex 学生性别 --2.课程表 Cour ...

  10. 算法导论(第三版)习题Exercises4.3(第四章三节)算法导论的一个印刷错误

    本节系列证明都可见4.5节需要说明的有4.3-8,4.3-9两题 4.3-8(本题有误) T(n)=4T(n/2)+n2根据4.5理论,结果为Θ(n2lgn) 4.3-9 m = lgn T(2m) ...