<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. Python中的Warnings模块忽略告警信息

    写了个小工具,其中涉及到从远程数据库中查询并返回,数据库是utf8编码,但是我的工具用的是GB2312编码,因此在返回数据的时候,有部分数据出现了:Truncated incorrect DECIMA ...

  2. python global 全局变量

    http://blog.csdn.net/mldxs/article/details/8559973 __author__ = 'dell' def func(): global x print 'x ...

  3. Selenium 自动化验收测试

    Web 应用程序的验收测试常常涉及一些手工任务,例如打开一个浏览器,并执行一个测试用例中所描述的操作.但是手工执行的任务容易出现操作人员人为的错误,也比较费时间.因此,尽可能将这些任务自动化,以消除人 ...

  4. c#,if 分支语句,条件运算符

    //输入整数a和b, //若a²+b²大于100,则输出a²+b²百位以上数字, //否则输出两数之和 /*Console.Write("请输入整数a:"); int a = in ...

  5. 我家用的网络IP地址给定，MAC绑定，我买了个无线路由器，请问怎么设定能让我的电脑和手机都能上网

    我家用的网络IP地址给定,MAC绑定,我买了个无线路由器,请问怎么设定能让我的电脑和手机都能上网   房东给的IP地址是:192.168.1.5 255.255.255.0 192.168.1.1 2 ...

  6. 2012 A 《中国近现代史纲要》课程期末考试试卷

    湖南人文科技学院2012—2013学年第1学期公共课 2011级<中国近现代史纲要>课程期末考试试卷 考核方式:(开卷)                                   ...

  7. [Audio processing] wav音频文件合并

    合并多个文件,需要包含1.文件读取和写入功能,2.数组合并 package com.audioprocessingbox.myfunc; import java.io.File; import jav ...

  8. [Java] Map / HashMap - 源代码学习笔记

    Map 1. 用于关联 key 和 value 的对象,其中 key 与 key 之间不能重复. 2. 是一个接口,用来代替 Java 早期版本中的 Dictionary 抽象类. 3. 提供三种不同 ...

  9. poj1611 并查集

    题目链接:http://poj.org/problem?id=1611 #include <cstdio> #include <cmath> #include <algo ...

  10. ionic之应用首次启动引导页

    用户首次启动app先进入引导页,localstroge记录状态,下次启动应用不再显示引导页. HTML: <html> <head> <meta charset=&quo ...