js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

<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 火狐以及谷歌的更多相关文章

js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...
原生JS实现图片上传并预览功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果很早以前在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件目前兼容浏览器(IE 谷歌火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
input file实现多选，限制文件上传类型，图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

随机推荐

常用的gnuradio 模块
---恢复内容开始--- 参考:http://gnuradio.org/redmine/projects/gnuradio/wiki/TutorialsWritePythonApplications ...
Linux 查看 80 端口的占用情况
lsof -i:端口号 eg: lsof -i:80 lsof -i:21 [root@localhost ~]# lsof -i: COMMAND PID USER FD TYPE DEVICE S ...
bzoj2096: [Poi2010]Pilots
Description Tz又耍畸形了!!他要当飞行员,他拿到了一个飞行员测试难度序列,他设定了一个难度差的最大值,在序列中他想找到一个最长的子串,任意两个难度差不会超过他设定的最大值.耍畸形一个人是 ...
PLSQL Developer如何设置自动打开上次编辑的文件
作为开发人员经常把sql语句保存到文件中以方便下次继续使用,问题是plsqlDev重启后每次都需要手工打开这个文件,好不方便: 以下设置是plsqlDev启动后自动打开上次编辑的文件. 选择配置> ...
基于 SWTBot 进行 Eclipse GUI 自动化测试
背景简介在软件开发领域,持续集成和部署对于软件测试自动化提出了越来越高的要求,基于 Eclipse 应用在这一需求中仍然占据重要的组成部分.目前主流的测试自动化工具主要以录制回放的功能为主,辅助以脚 ...
Jenkins 快速搭建持续集成环境
持续集成概述什么是持续集成随着软件开发复杂度的不断提高,团队开发成员间如何更好地协同工作以确保软件开发的质量已经慢慢成为开发过程中不可回避的问题.尤其是近些年来,敏捷(Agile) 在软件工程领域 ...
GCD - Extreme (II)
uva11424: 题目:给出n,求gcd(1,2)+gcd(1,3)+gcd(2,3)+gcd(1,4)+gcd(2,4)+gcd(3,4)+...+gcd(1,n)+gcd(2,n)+...+gc ...
SSH2中实例化不了Action的一个原因
 <action name="flow_*" class="workFlowAction" method=" ...
CBO学习笔记（转）
Query Transformation 在继续研究SQL的其他操作(比如Join)对CBO的影响之前,我们来讨论一下Oracle优化器的Query Transformation特性.我们都习惯于根据 ...
【动态规划】Vijos P1121 马拦过河卒
题目链接: https://vijos.org/p/1616 题目大意: 卒从(0,0)走到(n,m),只能向下或向右,不能被马一步碰到或走到马,有几种走法. 题目思路: [动态规划] 把马控制的地方 ...

js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

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

随机推荐

热门专题