1. <head runat="server">
  2.     <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title>
  3.     <script src="../Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
  4. </head>
  5. <body>
  6.     <form id="form1" runat="server">
  7.     <div>
  8.         <div>
  9.             <asp:FileUpload ID="fileAppImg" runat="server" Style="font-size: 13px;" onchange="previewImage(this,'preview','appImg')" /></div>
  10.         <div id="preview" style="margin-top: 10px;">
  11.             <img id="appImg" src="../SourceImg/ContentPage/AccountAuth/zjyl.jpg" alt="" style="margin-left: 1px;
  12.                 height: 214px; width: 160px;" />
  13.         </div>
  14.     </div>
  15.     </form>
  16. </body>
  17. </html>
  18. <%--图片上传预览--%>
  19. <script type="text/javascript">
  20.     //图片上传预览
  21.     function previewImage(file, div, img) {
  22.         MAXWIDTH = 160;
  23.         MAXHEIGHT = 214;
  24.         var div = document.getElementById(div);
  25.         if (file.files && file.files[0]) {
  26.             //验证图片大小
  27.             var imgType = /\.[^\.]+$/.exec(file.value);
  28.             if (imgType != ".jpg" && imgType != ".png") {
  29.                 alert("仅支持jpg和png两种格式的图片");
  30.                 file.value = "";
  31.                 $("#txtShowIcon").val("未选中文件");
  32.                 return;
  33.             }
  34.             div.innerHTML = "<img id='" + img + "'>";
  35.             var img = document.getElementById(img);
  36.             img.onload = function () {
  37.                 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  38.                 img.width = rect.width;
  39.                 img.height = rect.height;
  40.                 img.style.marginLeft = rect.left + 'px';
  41.                 img.style.marginTop = rect.top + 'px';
  42.             }
  43.             var reader = new FileReader();
  44.             reader.onload = function (evt) { img.src = evt.target.result; }
  45.             reader.readAsDataURL(file.files[0]);
  46.         }
  47.         else {
  48.             //验证图片大小
  49.             var imgType = /\.[^\.]+$/.exec(file.value);
  50.             if (imgType != ".jpg" && imgType != ".png") {
  51.                 alert("仅支持jpg和png两种格式的图片");
  52.                 return;
  53.             }
  54.             var filePath = file.value;
  55.             //IE浏览器
  56.             var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
  57.             file.select();
  58.             var src = document.selection.createRange().text;
  59.             div.innerHTML = '<img id="' + img + '">';
  60.             var img = document.getElementById(img);
  61.             //img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
  62.             var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
  63.             status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
  64.             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>";
  65.         }
  66.     }
  67.     function clacImgZoomParam(maxWidth, maxHeight, width, height) {
  68.         var param = { top: 0, left: 0, width: width, height: height };
  69.         param.width = maxWidth;
  70.         param.height = maxHeight;
  71.         param.left = 0;
  72.         param.top = 0;
  73.         return param;
  74.     }
  75. </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. Notepad++插件之TextFX

    Technorati 标记: notepad   Notepad++插件TextFX Characters是一款默认安装的插件,由于功能强大,被编程爱好者认为是最好的Notepad++插件,第二名是L ...

  2. CodeForces 554B（扫房间）

      CodeForces 554B Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u ...

  3. hibernate spring sturts2配置

    <?xml version='1.0' encoding='utf-8'?> <!DOCTYPE hibernate-configuration PUBLIC "-//Hi ...

  4. Android 5.0 技术新趋势

    由于 Android 的版本分裂比较严重,整个新系统升级可能需要一两年甚至更长时间.所以目前使用 Android 5.0 的大部分是喜欢尝鲜的用户,同时现在市场上能够很好支持 Android 5.0 ...

  5. JavaScript API

    HTML5 DOM, BOM, XMLHttpRequest, NodeJS, Framework Framework---------------> jQuery zepto Undersco ...

  6. 使用spring-amqp结合使用rabbitmq

    maven 依赖包配置如下: <dependencies> <dependency> <groupId>org.springframework.amqp</g ...

  7. LA 4726 再看斜率优化

    感觉最近一批解题报告没写,现在慢慢补吧,算是noip前攒攒rp了 首先感到深深的自责,因为之前对斜率优化没有深入的理解,只是记住了一般步骤,并没有完全了解为什么这样做 先就这道题目而言 首先这种序列题 ...

  8. bzoj2783

    由于路径的深度是升序的所以我们可以考虑用前缀和的思想,用sum维护点到根路径上节点和对于每个点x存在路径和为s即这个点到根的路径上存在y,使sum[x]-sum[y]=s这显然是可以二分的 type ...

  9. webserver/CGI

    来自:http://blog.sina.com.cn/s/blog_466c6640010000nj.html   1. TUX2. lighttpd,thttpd,shttpd 3. 几种web s ...

  10. 在Linux下查看环境变量

    原文地址:http://blog.chinaunix.net/uid-25124785-id-77098.html 有时候在编写makefile的时候,自己都不清楚有些变量是什么,也不清楚如何查看,于 ...