在开发项目过程中会碰到不同浏览器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样式不一样的更多相关文章

  1. 自定义input file样式

    自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> ...

  2. input:file样式怎样修改

    问题描述: 我需要点击input:file来修改img中的图片,但是input:file样式太丑 解决办法: 给file设置透明度为0,让用户看不见他 创建新的button按钮 修改button按钮样 ...

  3. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  4. input(file)样式修改及上传文件名显示

    实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 ...

  5. input file 样式以及获取选择文件方法集合

    样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display: ...

  6. input file样式美化

    默认样式: <input type="file" /> 美化样式时: 将其设置为透明,设置宽高覆盖到需要用的地方,宽100%,高100% 可以用到定位 .box{ po ...

  7. input.file样式修改

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 修改input:file样式

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  9. ajax+ashx 完美实现input file上传文件

    1.input file 样式不能满足需求 <input type="file" value="浏览" /> IE8效果图:    Firefox效 ...

  10. 巧妙利用label标签实现input file上传文件自定义样式

    提到上传文件,一般会想到用input file属性来实现,简单便捷,一行代码即可    但input file原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同   我们往 ...

随机推荐

  1. 基恩士PLC数据 转 Modbus RTU TCP项目案例

    1         案例说明 1.   设置网关采集基恩士PLC数据 2.   把采集的数据转成Modbus协议转发给其他系统. var code = "244226f8-1eed-48e4 ...

  2. C++ 史上首次超越 C,Python 第二!

    TIOBE 公布了 2024 年 6 月的编程语言排行榜--C++ 史上首次超越 C,跃至榜二,仅次于 Python. C++ 是一种广泛应用于嵌入式系统.游戏开发和金融交易软件等领域的语言,在本月成 ...

  3. C#语言编写的仅有8KB大小的简易贪吃蛇开源游戏

    前言 今天大姚给大家分享一款由C#语言编写的仅有8KB大小的简易贪吃蛇开源游戏:SeeSharpSnake. 项目特点 该仓库中的项目文件和脚本可以用多种不同的配置构建相同的游戏,每个配置生成的输出大 ...

  4. Linux 应用案例开发手册——基于Zynq-7010/20工业开发板

    目 录 1 开发案例说明 4 2 Linux 常用开发案例 4 2.1 tl_led_flash 案例 4 2.2 tl_key_test 案例 7 2.3 tl_can_echo 案例 11 2.4 ...

  5. 移动web布局方法

    继续更新移动端的一个布局,这也是经典中的经典,当初只知道个rem和vwvh适配,其实这里面还有很多的门道不只是一个适配这么简单 一.前置 1.背景缩放 我们都知道做移动端,给的图都是二倍图,你拿来用直 ...

  6. Win10 内存内存占用过高的一种解决方案

    前言 最近win10的电脑一开机,什么都没启动,内存占用率高达90%,笔记本虽然是8G的内存,但不应该如此不堪.在网上找到一个十分有效的解决方案. 正文 使用 win10系统自带内存诊断工具 按下 h ...

  7. Maven Helper插件——实现一键Maven依赖冲突问题

    业余在一个SpringBoot项目集成Swagger2时,启动过程一直出现以下报错信息-- An attempt was made to call a method that does not exi ...

  8. 分享一个国内可用的ChatGPT网站,免费无限制,支持AI绘画

    背景 ChatGPT作为一种基于人工智能技术的自然语言处理工具,近期的热度直接沸腾. 作为一个AI爱好者,翻遍了各大基于ChatGPT的网站,终于找到一个免费!免登陆!手机电脑通用!国内可直接对话的C ...

  9. Nginx 可视化配置神器NginxConfig

    Nginx 是前后端开发工程师必须掌握的神器.该神器有很多使用场景:比如反向代理.负载均衡.动静分离.跨域等等. 把 Nginx 下载下来打开 conf 文件夹的 nginx.conf 文件,Ngin ...

  10. 解决方案 | 1分钟快速解决 win10 任务管理器性能不显示GPU?

    1 问题 环境:win10 22h2 2 解决方法 win+r输入dxdiag回车,查看下面信息: (1)确认你的Windows10版本号大于1909,如果确认,在任务管理器进程页右键名称一栏,将GP ...