一、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. antV G6流程图在Vue中的使用

    最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...

  2. GPS格式标准

    GPS接收机串行通信标准摘要 参考NMEA-0183 美国国家海洋电子协会(NMEA—The NationalMarine Electronics Association) 为了在不同的GPS导航设备 ...

  3. POJ 2017 Speed Limit (直叙式的简单模拟 编程题目 动态属性很少,难度小)

                                                                                                      Sp ...

  4. SDUT OJ 周赛 找有毒的那杯水(思维逻辑 + 分治思想 )

    你打我啊 Time Limit: 500ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述 最近看了一个非常好玩的题,如果有972杯水,其中有971个没有毒的,1个有 ...

  5. SDUT OJ 1598 周游列国

    周游列国 Time Limit: 1000ms   Memory limit: 32768K  有疑问?点这里^_^ 题目描述 大家都知道孔子吧,春秋战国时候的一个老头儿.当时出国还不用护照,所以他经 ...

  6. ssm使用velocity模板语言

    1.在pom.xml里添加velocity模板语言支持的依赖 <!-- velocity模板语言支持包 --> <dependency> <groupId>org. ...

  7. 2016-5-23 jsp

    1.table的边框:rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线,也就是我们只能看到表格的列:当rules=rows时,就隐藏了纵 ...

  8. spark运行方式及其常用参数

    yarn cluster模式 例行任务一般会采用这种方式运行 指定固定的executor数 作业常用的参数都在其中指定了,后面的运行脚本会省略 spark-submit \ --master yarn ...

  9. CodeForces979D:Kuro and GCD and XOR and SUM(Trie树&指针&Xor)

    Kuro is currently playing an educational game about numbers. The game focuses on the greatest common ...

  10. jQuery EasyUI Portal 保存拖动位置,仿谷歌DashBoard效果的

    仿照谷歌http://www.google.com/ig?hl=zh-CN中的效果,本文档中包含了拖动后保存位置至Cookie中以及拖动后不保存位置的html文件效果,文档结构