【前端】模拟微信上传图片(带预览,支持预览gif)
一、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)的更多相关文章
- 微信自带浏览器不支持form表单post提交方案解决
微信自带浏览器form表单post提交,Java控制后台获取不到值得解决方案: 第一种:把post改成get请求,但是改后另一个问题来了就是,数据不安全了,连接上都能看到,导致数据会流失,Java ...
- 模拟微信上传图片(带预览,支持预览gif)
一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...
- HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (二)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 C ...
- 最好用的js前端框架、组件、文档在线预览插件
这里收集的都是个人认为比较好的js框架.组件 js前端ui框架 此处列举出个人认为最好的几个框架(排序即排名),现在好点的框架商用都需要付费,以下几个也不例外,但是由于组件丰富,都可以作为企业应用的完 ...
- 纯前端下载pdf链接文件,而不是打开预览的解决方案
纯前端下载pdf链接文件,而不是打开预览的解决方案 一,介绍与需求 1.1,介绍 XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行 ...
- Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集
Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集 继去年 10 月推出 Windows Azure HDInsight 之后,我们宣布 Windows Az ...
- Rider中Winform开发支持预览(5)
1.Rider .netCore3.0 winform设计器支持预览,这点vs目前还不支持. 2.不过winform下控件选择工具栏都是没有图标的
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- react-native 的微信SDK辅助包,支持微信登录、微信分享、微信支付
微信SDK集成示例,现已完成微信授权登录,之后将陆续包装分享等其他功能. ReactNative高级交流群 127482131 或访问 http://blog.1ygowu.com ReactNat ...
随机推荐
- antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
- GPS格式标准
GPS接收机串行通信标准摘要 参考NMEA-0183 美国国家海洋电子协会(NMEA—The NationalMarine Electronics Association) 为了在不同的GPS导航设备 ...
- POJ 2017 Speed Limit (直叙式的简单模拟 编程题目 动态属性很少,难度小)
Sp ...
- SDUT OJ 周赛 找有毒的那杯水(思维逻辑 + 分治思想 )
你打我啊 Time Limit: 500ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 最近看了一个非常好玩的题,如果有972杯水,其中有971个没有毒的,1个有 ...
- SDUT OJ 1598 周游列国
周游列国 Time Limit: 1000ms Memory limit: 32768K 有疑问?点这里^_^ 题目描述 大家都知道孔子吧,春秋战国时候的一个老头儿.当时出国还不用护照,所以他经 ...
- ssm使用velocity模板语言
1.在pom.xml里添加velocity模板语言支持的依赖 <!-- velocity模板语言支持包 --> <dependency> <groupId>org. ...
- 2016-5-23 jsp
1.table的边框:rules这个参数,它有三个值(cols,rows,none),当rules=cols时,表格会隐藏横向的分隔线,也就是我们只能看到表格的列:当rules=rows时,就隐藏了纵 ...
- spark运行方式及其常用参数
yarn cluster模式 例行任务一般会采用这种方式运行 指定固定的executor数 作业常用的参数都在其中指定了,后面的运行脚本会省略 spark-submit \ --master yarn ...
- 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 ...
- jQuery EasyUI Portal 保存拖动位置,仿谷歌DashBoard效果的
仿照谷歌http://www.google.com/ig?hl=zh-CN中的效果,本文档中包含了拖动后保存位置至Cookie中以及拖动后不保存位置的html文件效果,文档结构