不同浏览器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原生提供的默认样式大多情况下都不符合需求,且在不同浏览器上呈现的样式也不尽相同 我们往 ...
随机推荐
- python selenium.remote远程连接时间达10分钟
问题: 在机器A搭建了selenium-grid的环境,hub以4444端口号启动,并在4444下注册了子node,端口4445,浏览器配置chrome 使用代码进行远程连接,并创建会话: 传入的se ...
- rsync 的使用
背景 原文地址:Rsync参数说明及使用文档(给我自己看的) 一.前言 最近发现rsync挺好用的--不过参数有点多,所以这儿写一篇给自己以后要用的时候做个参考. 二.参数说明 这儿全是我翻资料连蒙带 ...
- 案例源码公开!分享瑞芯微RK3568J与FPGA的PCIe通信案例,嵌入式必读!
ARM + FPGA架构有何种优势 近年来,随着中国新基建.中国制造2025的持续推进,单ARM处理器越来越难满足工业现场的功能要求,特别是能源电力.工业控制.智慧医疗等行业通常需要ARM + F ...
- PHP转Go系列 | ThinkPHP与Gin框架之API接口签名设计实践
大家好,我是码农先森. 回想起以前用模版渲染数据的岁月,那时都没有 API 接口开发的概念.PHP 服务端和前端 HTML.CSS.JS 代码混合式开发,也不分前端.后端程序员,大家都是全干工程师.随 ...
- 直接给一个数组项赋值,Vue 能检测到变化吗?
由于 JavaScript 的限制,Vue 不能检测到以下数组的变动: 当你利用索引直接设置一个数组项时,例如: vm.items[indexOfItem] = newValue 当你修改数组的长度时 ...
- [oeasy]python0088_字节_Byte_存储单位_KB_MB_GB_TB
编码进化 回忆上次内容 上次 回顾了 字符大战的结果 ibm 曾经的 EBCDIC 由于字符不连续的隐患 导致后续 出现 无数问题 无法补救 7-bit 的 ASA X3.4-1963 字母序号连续 ...
- CF452C 题解
洛谷链接&CF 链接 题目简述 有 \(m \times n\) 张牌,有 \(n\) 个种类,每个种类有 \(m\) 张,现在抽一张放回,再抽一张,求这张牌与第一张抽出的牌种类相同的概率. ...
- JavaScript '&&' 与 '||' 操作符
"&&" 操作符 1.如果第一个操作数是对象,则返回第二操作数 var res = {} && "Hello";//Hello ...
- ASP.NET Core 3.x 三种【输入验证】方式
验证要做三件事 定义验证规则 按验证规则进行检查 报告验证的错误. 在把错误报告给API消费者的时候,报告里并不包含到底是服务端还是API消费者引起的错误,这是状态码的工作.而通常响应的Body里面会 ...
- Odoo 基于Win10搭建基于Win10搭建odoo14开发环境搭建
实践环境 win10 Python 3.6.2 odoo_14.0.latest.tar.gz 下载地址: https://download.odoocdn.com/download/14/src?p ...