<head runat="server">

    <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title>

    <script src="../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <div>

            <asp:FileUpload ID="fileAppImg" runat="server" Style="font-size: 13px;" onchange="previewImage(this,'preview','appImg')" /></div>

        <div id="preview" style="margin-top: 10px;">

            <img id="appImg" src="../SourceImg/ContentPage/AccountAuth/zjyl.jpg" alt="" style="margin-left: 1px;

                height: 214px; width: 160px;" />

        </div>

    </div>

    </form>

</body>

</html>

<%--图片上传预览--%>

<script type="text/javascript">

    //图片上传预览

    function previewImage(file, div, img) {

        MAXWIDTH = 160;

        MAXHEIGHT = 214;

        var div = document.getElementById(div);

        if (file.files && file.files[0]) {

            //验证图片大小

            var imgType = /\.[^\.]+$/.exec(file.value);

            if (imgType != ".jpg" && imgType != ".png") {

                alert("仅支持jpg和png两种格式的图片");

                file.value = "";

                $("#txtShowIcon").val("未选中文件");

                return;

            }

            div.innerHTML = "<img id='" + img + "'>";

            var img = document.getElementById(img);

            img.onload = function () {

                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

                img.width = rect.width;

                img.height = rect.height;

                img.style.marginLeft = rect.left + 'px';

                img.style.marginTop = rect.top + 'px';

            }

            var reader = new FileReader();

            reader.onload = function (evt) { img.src = evt.target.result; }

            reader.readAsDataURL(file.files[0]);

        }

        else {

            //验证图片大小

            var imgType = /\.[^\.]+$/.exec(file.value);

            if (imgType != ".jpg" && imgType != ".png") {

                alert("仅支持jpg和png两种格式的图片");

                return;

            }

            var filePath = file.value;

            //IE浏览器

            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

            file.select();

            var src = document.selection.createRange().text;

            div.innerHTML = '<img id="' + img + '">';

            var img = document.getElementById(img);

            //img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);

            div.innerHTML = "<div id='divhead' style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;margin-left:" + rect.left + "px;" + sFilter + src + "\"'></div>";

        }

    }

    function clacImgZoomParam(maxWidth, maxHeight, width, height) {

        var param = { top: 0, left: 0, width: width, height: height };

        param.width = maxWidth;

        param.height = maxHeight;

        param.left = 0;

        param.top = 0;

        return param;

    }

</script>

js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌的更多相关文章

  1. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...

  2. 原生JS实现图片上传并预览功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  4. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  6. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  7. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  9. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

  1. 递归删除.DS_Store文件

    删除svn文件 sudo find . -name ".DS_Store" -exec rm -r {} \; sudo find . -name ".git" ...

  2. BZOJ 1043 下落的圆盘

    Description 有n个圆盘从天而降,后面落下的可以盖住前面的.求最后形成的封闭区域的周长.看下面这副图, 所有的红色线条的总长度即为所求.  Input n ri xi y1 ... rn x ...

  3. A Statistical View of Deep Learning (I): Recursive GLMs

    A Statistical View of Deep Learning (I): Recursive GLMs Deep learningand the use of deep neural netw ...

  4. ZABBIX作集中式NGINX性能监控的注意要点

    今天测试好了.但有几个要点要注意. 一是出了问题看日志. 二是主动测试脚本. 三是注意LLD自动发现的ZABBIX类型(TRAPPER,捕捉器类型) 四是有主机上有问题时可以看到(UNSUPPORT) ...

  5. WSS存储服务器（Windows Storage Server） 2012新功能解析

    虽然最近一段时间有关微软的新闻大多数集中在Windows 8以及Surface平板设备身上,但数周之前Windows Server 2012新版本中所包含的Windows Storage Server ...

  6. perl 定义post接口

    [root@wx03 mojo]# cat a1.pl use Digest::MD5; my $md5 = Digest::MD5->new; $md5->add(1234567); p ...

  7. 【Linux】鸟哥的Linux私房菜基础学习篇整理（六）

    1. 正则表达式特殊符号.[:alnum:]:代表英文大小写字符及数字:[:alpha:]:代表英文大小写字符:[:blank:]:代表空格键与[Tab]键:[:cntrl:]:代表键盘上的控制键,即 ...

  8. hdu-3487-Play with Chain-(splay 区间翻转，切割，插入)

    题意: 区间翻转,切割,插入 // File Name: ACM/HDU/3487.cpp // Author: Zlbing // Created Time: 2013年08月10日 星期六 21时 ...

  9. Ganglia监控搭建

    一．Ganglia介绍: Ganglia是一个监控服务器.集群的开源软件,能够用曲线图表现最近一个小时,最近一天,最近一周,最近一月,最近一年的服务器或者集群的cpu负载,内存,网络,硬盘等指标.Ga ...

  10. 【线段树】HDU 5493 Queue (2015 ACM/ICPC Asia Regional Hefei Online)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5493 题目大意: N个人,每个人有一个唯一的高度h,还有一个排名r,表示它前面或后面比它高的人的个数 ...