首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >不同浏览器input file样式不一样

不同浏览器input file样式不一样

作者头像
一笠风雨任生平
发布2019-08-02 11:00:23
5240
发布2019-08-02 11:00:23
举报
文章被收录于专栏:服务化进程服务化进程

在开发项目过程中会碰到不同浏览器input file样式不一样。

经过分析,打算都用IE上面的附件上传样式,

方案如下:

1、在IE下截个如上面的上传按钮,并保存。

2、判断浏览器类型,如果是非IE,则将页面上的input 设置为近乎透明,然后将图片放在上面。

不用修改原有代码,渲染时会扫描页面的input file 然后进行样式覆盖。

代码如下

css:

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	width: 208px;
	position: relative;
	text-align: right;
	-moz-opacity: 0;
	filter: alpha(opacity :     0);
	opacity: 0;
	z-index: 2;
}

js代码:

/**
 * 附件上传样式自定义,解决不同浏览器附件上传框样式不一样问题
 */
function initFileUploads() {
	if($.browser&&$.browser.msie) return;
	$("input[type=file]").each(function(){
		if($(this).parent().attr("class")!='fileinputs') return;
		$(this).attr("class","file");
		var obj=$("<div class='fakefile'><input ct='file'/><img style='padding-bottom:4px;' src='common/image/upload.png'><div>");
		$(this).after(obj);
		$(this).parent().find("input[ct=file]").width($(this).width()-65);
		$(this).on("change",function(){
			$(($(this).parent().find("input"))[1]).val($(this).val());
		})
	});
}
$(document).ready(function(){
	initFileUploads();
})
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档