css控件透明属性设置IE firefor设置方法
<STYLE type=text/css>
.upfilefield{position:absolute; FILTER: alpha(opacity:0);-moz-opacity:0.5;opacity: 0; width:88px; height:29px; top:0px; right:0px;}
</STYLE>

导入:<input type="file" name="file" id="file" class="easyui-validatebox" data-options="required:true" style="position:absolute; FILTER: alpha(opacity:0);-moz-opacity:0.5;opacity: 0;width:150px;"/>
<input type="button" onclick="chooseFile()" value="选择EXCEL表" style="border:none;" />

ie 设置为FILTER: alpha(opacity:0);
firefor 设置为-moz-opacity:0.5;opacity: 0;

function chooseFile(){
document.getElementById("file").click();
}

function fileOnChange()
{
var array1=$('#file').val().split('\\');
var fileName=array1[array1.length-1];
$('#txtFileName').val(fileName);
}

将导入按钮选择文件修改为“选择EXCEL表”

<div style="float:left;width:25px;height:10px;"></div><div style="width:270px;float:left">导入:<input type="file" name="file" id="file" style="position:absolute;width:120px;" class="easyui-validatebox" data-options="required:true" onchange="fileOnChange()" />
<input type="button" onclick="chooseFile()" value="选择EXCEL表" style="border:none;width:120px;" /><input type="text" id="txtFileName" name="txtFileName" style="width:108px;border:none;" readonly="readonly" /></div>
<div style="float:left;"> <input type="button" name="btnsc" id="btnsc" value="上传" class="but20" />
<span style="text-align:right;"><input type="button" name="but" value="模板下载" class="but30" onclick="DownloadTemplate()" />
<input type="button" name="cs" value="查看参数" class="but30" onclick="CheckParams()" /></span></div>

会有个bug:在ie下,单击按钮前半部分无反应:因为在ie下file控件必须单击浏览按钮才可

css控制file控件透明 漂浮的更多相关文章

  1. File控件杂谈

    我们通常使用<input type='file'/>来实现网页中文件上传功能,用户可以通过点击file控件选择本地文件,当我们提交包含该控件的表单时,浏览器会向服务器发送用户选中的文件. ...

  2. 美化type="file"控件

    对于type="file"而言是一个不大好看的控件.如果不美化他一下,总感觉自己的网站有些缺乏了美感 上代码: <!DOCTYPE html> <html> ...

  3. 美化 input type=file控件

    大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...

  4. 混合开发 webview 中file 控件 点击后无反应解决方法

    最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后, ...

  5. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  6. input的file 控件及美化

    在一些网站进行上传时,当单击了“浏览”按钮之后会弹出[选择文件]的对话框.想要实现这一功能,用input的file控件来实现就好啦~ <!doctype html> <html la ...

  7. 怎么清除file控件的文件路径

    还记得上次做一个文件上传,后来测试告诉我说,如果我要是不选择文件了呢?该怎么办?我说:简单啊,做一个取消按钮不就完事了吗!然后我就想一个file空间做一个取消是多么简单的事,用js处理可是想怎么样就怎 ...

  8. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  9. file控件change事件触发问题

    最近,项目中需要用到一个图片上传的功能,我用的file控件来选取图片文件,然后利用js读取文件来预览图片,最后再根据用户的操作来决定是否上传文件. 其中碰到了一个奇怪的问题:在选取完第一张图片,并上传 ...

随机推荐

  1. gogs详细配置

    sudo apt-get update sudo apt-get upgrade sudo adduser git //创建用户  密码 ******* su git//切换到git用户 cd ~   ...

  2. (数字IC)低功耗设计入门(八)——物理级低功耗设计&to be continued?

    前面学习了从系统级到门级的低功耗设计,现在简单地了解了一下物理级设计.由于物理级的低功耗设计与后端有关了,这里就不详细学习了.这里主要是学习了一些基本原则,在物理级,进行低功耗设计的基本原则是:    ...

  3. 使用交互式方式在SQL server2017上创建数据库

    软件基础:在电脑上提前安装好SQL server2017,并且安装好其中的SSMS(SQL server Management Studio) 创建方式:交互式 操作内容:创建学生课程数据库系统 步骤 ...

  4. [转]Python爬虫框架--pyspider初体验

    标签: python爬虫pyspider 2015-09-05 10:57 9752人阅读 评论(0) 收藏 举报  分类: Python(8)  版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  5. requests-证书验证

    import requests #response = requests.get('https://www.12306.cn') #print(response.status_code) #以上会显示 ...

  6. angulajs_删除功能

  7. 如何解释vue的生命周期才能令面试官满意?

    当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...

  8. github git 在GitHub上创建项目并将本地项目push到网站上

    众所周知,git是与svn类似的版本控制系统,git的去中心化.分布式等的优点,在不久将来用户量大有可能超过svn, 常见的代码托管网站有GitHub,coding.net, gitee.com 码云 ...

  9. HTML5入门必知

    第一部分 认识HTML 一.认识HTML 1.HTML HTML:超文本标签语言Hyper Text Markup Language HTML:网页源代码. 浏览器:"解释和执行" ...

  10. Java图形界面学习---------简易登录界面

    /** * @author Administrator * Java图形界面学习---------简易登录界面 * date:2015/10/31 */ import java.awt.BorderL ...