一、Html

<style type="text/css">
#previewDiv{width:50px;height:50px;overflow:hidden;position:relative;border:1px solid;}
#previewImg{height:100%;width:100%; position:absolute;z-index:0;left:0;}
.img_uploader{width:50px;height:50px;z-index:1;position:absolute;left:0; filter:alpha(opacity=0);-moz-opacity:0;opacity:0;}
</style> <div id="previewDiv">
  <img id="previewImg" alt="" src="" /><input type="file" class="img_uploader"/>
</div> <%--文件控件也可使用服务器控件: <asp:FileUpload ID="fileUpload" CssClass="img_uploader" runat="server" />--%>

二、JQ

//需引用jquery库
$(function () {
$(".img_uploader").change(function () {
PreviewImage(this, 'previewImg', 'previewDiv')
});
});
    function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1)
fileObj.blur();//不加上document.selection.createRange().text在ie9会拒绝访问
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
newPreview.style.border = "solid 1px #d2e2e2";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = "";//清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
}

三、参考

原理:使用FileReader对象的readAsDataURL方法来读取图像文件(http://blog.okbase.net/jquery2000/archive/1296.html)

http://www.cnblogs.com/slyzly/articles/2411940.html

http://gallop-liu.iteye.com/blog/1344778  (参数previewDiv是为了兼容IE9,详情参考该链接)

【前端】模拟微信上传图片(带预览,支持预览gif)的更多相关文章

  1. 微信自带浏览器不支持form表单post提交方案解决

      微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...

  2. 模拟微信上传图片(带预览,支持预览gif)

    一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...

  3. HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...

  4. 最好用的js前端框架、组件、文档在线预览插件

    这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...

  5. 纯前端下载pdf链接文件,而不是打开预览的解决方案

    纯前端下载pdf链接文件,而不是打开预览的解决方案 一,介绍与需求 1.1,介绍 XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行 ...

  6. Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集

     Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集 继去年 10 月推出 Windows Azure HDInsight 之后,我们宣布 Windows Az ...

  7. Rider中Winform开发支持预览(5)

    1.Rider .netCore3.0 winform设计器支持预览,这点vs目前还不支持. 2.不过winform下控件选择工具栏都是没有图标的

  8. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  9. react-native 的微信SDK辅助包,支持微信登录、微信分享、微信支付

    微信SDK集成示例,现已完成微信授权登录,之后将陆续包装分享等其他功能. ReactNative高级交流群 127482131 或访问  http://blog.1ygowu.com ReactNat ...

随机推荐

  1. XMU C语言程序设计实践(5)

    •       使用动态链表完成一个简单的商品库存信息管理系统. •       商品信息包括如下字段:商品号.商品名称.商品库存 •       函数 create:接收用户输入的商品号和商品名称的 ...

  2. SQL Server 数据库备份策略,第一周运行失败的原因

    一般生产库,采用 每10分钟备份Log,每天备份Diff,每周备份Full的策略. 同时存在异地备份.异地备份可使用SQL Server本身的cmdshell存储过程,调用系统命令. 在为新数据库,建 ...

  3. html5--6-52 动画效果-过渡

    html5--6-52 动画效果-过渡 实例 @charset="UTF-8"; div{ width: 300px; height: 150px; margin: 30px; f ...

  4. Java中文&编码问题小结

    转自:http://www.blogjava.net/zhugf000/archive/2005/10/09/15068.html Java字符编码转换过程说明 常见问题 JVM JVM启动后,JVM ...

  5. opencv直方图该怎么画

    图像直方图是反映图像中像素分布特性的统计表,一般显示如下: 其中横坐标代表的是图像像素的种类,或者说是灰度级,纵坐标代表的是每一级灰度下像素数或者该灰度级下像素数在所有图像总像素数总所占的百分比. 直 ...

  6. 「LuoguT36048」 Storm in Lover

    Description 平成二十四年(2012年),5月11日,东京,某弓道场. "呐,呐,海未酱,你听说了吗?几天后的那场弓道大会?啊-!"橙发少女兴奋地拿着一张传单一样的纸跑向 ...

  7. CentOS 6.5升级到CentOS 7

    CentOS7 已经发布了,之前一直想在上面测试一下,一直没有机会,这次终于可以感受一下CentOS7了.一直使用CentOS6.5有一段时间了,但是由于它的内核版本依然停留在2.6.32,所以决定升 ...

  8. 【旧文章搬运】从PEB获取内存中模块列表

    原文发表于百度空间,2008-7-25========================================================================== PEB中的L ...

  9. FTP相关内容

    FTP相关介绍 FTP 1)File Transfer Protocol ( FTP ) 是相当古老的网络协议之一,他最主要的功能就是进行 Server端与 Client 端之间的档案传送的功能.这个 ...

  10. 用"\v"=="v"判断是IE浏览器和非IE

    其实就是利用各浏览器对转义字符"\v"的理解在ie浏览器中,"\v"没有转义,得到的结果为"v"而在其他浏览器中"\v" ...