不同浏览器input file样式不一样
在开发项目过程中会碰到不同浏览器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();
})
不同浏览器input file样式不一样的更多相关文章
- 自定义input file样式
自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...
- input:file样式怎样修改
问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...
- input file样式修改,图片预览删除功能
本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...
- input(file)样式修改及上传文件名显示
实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...
- input file 样式以及获取选择文件方法集合
样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...
- input file样式美化
默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...
- input.file样式修改
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 修改input:file样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- ajax+ashx 完美实现input file上传文件
1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图: Firefox效 ...
- 巧妙利用label标签实现input file上传文件自定义样式
提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可 但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
随机推荐
- Android无障碍自动化结合opencv实现支付宝能量自动收集
Android无障碍服务可以操作元素,手势模拟,实现基本的控制.opencv可以进行图像识别.两者结合在一起即可实现支付宝能量自动收集.opencv用于识别能量,无障碍服务用于模拟手势,即点击能量. ...
- python重拾第十二天-sqlalchemy ORM
本节内容 ORM介绍 sqlalchemy安装 sqlalchemy基本使用 多外键关联 多对多关系 表结构设计作业 1. ORM介绍 orm英文全称object relational mapping ...
- Android 自定义带动画的柱状图
功能分析 假设要使用柱状图展示用户一周的数据,通用的做法是对接三方图表SDK或者自己通过代码绘制. 1.三方SDK通常包体较大,且定制性差,对特定的UI需求兼容性差; 2.自己绘制,比较复杂,而且要考 ...
- Linux 内核:设备树 学习总结
背景 之前写过设备树DTS 学习:学习总结(应用篇)的学习,但是是偏向于应用:这次针对了设备树的架构以及在驱动中的使用流程做了补充. 基于 Linux 内核 v4.14. 目录 标题 说明 设备树:d ...
- ZYNQ:使用 PetaLinux 构建Linux项目
参考文档:ug1144-petalinux-tools-reference-guide.pdf 环境安装 tofrodos iproute2 gawk gcc g++ git make net-too ...
- FreeRtos学习总结
背景 最近项目需要,花了几天时间学习了FreeRTOS,因为之前有操作系统和底层的基础,所以上手非常快. 正文 基础篇 学习方法:建议先阅读本人整理的文章:再结合FreeRTOS文档官方的全英文档&l ...
- win11添加开机自启动
方法1 win + R 打开运行,输入 shell:startup 会打开一个文件夹 将想要启动的程序快捷方式放进文件夹 在设置里面搜索"启动",可以看到开机启动项,确认已经打开. ...
- 【论文阅读】VDBFusion: Flexible and Efficient TSDF Integration of Range Sensor Data
Type: Sensors Year: 2022 tag: Mapping 组织: Bonn 参考与前言 论文链接:https://www.ncbi.nlm.nih.gov/pmc/articles/ ...
- Spring的三种依赖注入的方式
1.什么是依赖注入 依赖注入(Dependency Injection,简称DI),是IOC的一种别称,用来减少对象间的依赖关系. 提起依赖注入,就少不了IOC. IOC(Inversion of C ...
- Spark3 学习【基于Java】4. Spark-Sql数据源
通过DF,Spark可以跟大量各型的数据源(文件/数据库/大数据)进行交互.前面我们已经看到DF可以生成视图,这就是一个非常使用的功能. 简单的读写流程如下: 通过read方法拿到DataFrameR ...