<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. ccf认证模拟题之三---最大的矩形

    问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方图.例如,下图中六个矩形的高度就分别是3, 1, 6, 5, 2, 3 ...

  2. Maven国内镜像-阿里云

    国外的maven下载速度堪忧,大部分国内网络访问都很慢国内的阿里云同样提供了maven的文件镜像使用:1.在maven的setting.xml加入下段代码即可使用阿里云的maven镜像 <mir ...

  3. collections之命名元组

    #python中没有为我们提供可命名的tuple的类,这个类需要我们自己来定义,下面我们就自己来定义一个类,然后namedtuple就是可以通过名称来get#tuple中的元素,python中的tup ...

  4. web 批量打印

    批量打印,同时打印多个页面,有两种思路: 第一种思路,将所有的页面内容加载到一个页面中,然后再打印.这种打印方式有几个弊端,页面的样式会丢失,页面太多同时加载到一个页面中,数据量太大,响应时间很长,消 ...

  5. 【原创】有关Silverlight中自动生成的类中 没有WCF层edmx模型新加入的对象 原因分析。

      前端页面层:    编译老是不通过,报如下如所示错误:     -- 然后下意识的查了下 生成的cs文件,没有搜到根据edmx 生成的 对应的类.       结果整理: 1.尽管在 edmx 模 ...

  6. Bioconductor简介

    Bioconductor简介 2012-10-09 ~ ADMIN 源:Bioconductor: open software development for computational biolog ...

  7. python性能测试大致计划

      hi guy: 如果注意到创建时间,那就对了.这份文章,是我学习Python一个月以后动手写的.   写下这份计划以后,只完成了第一步,其中磕磕绊绊编写代码的过程,很大一部分时间是完全用txt写的 ...

  8. c++11 stl 学习之 pair

    pair以模板的方式存储两个数据 namespace std {template <typename T1, typename T2>struct pair {// memberT1 fi ...

  9. Product of integers

    https://github.com/Premiumlab/Python-for-Algorithms--Data-Structures--and-Interviews/blob/master/Moc ...

  10. 2018.09.16 loj#10242. 取石子游戏 2(博弈论)

    传送门 同样有一个显然的结论. 如果a1a_1a1​ xorxorxor a2a_2a2​ xorxorxor a3a_3a3​ xor...xor...xor... xorxorxor ana_na ...