兼容各浏览器的 input type=file 文件域美化

样式：

 代码如下 复制代码

.fileInput{width:102px;height:34px; background:url(http://images.cnblogs.com/cnblogs_com/dreamback/upFileBtn.png);overflow:hidden;position:relative;}
.upfile{position:absolute;top:-100px;}
.upFileBtn{width:102px;height:34px;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
 HTML:

        <div class="fileInput left">
          <input type="file" name="upfile" id="upfile" class="upfile" onchange="document.getElementById('upfileResult').innerHTML=this.value"/>
          <input class="upFileBtn" type="button" value="上传图片" onclick="document.getElementById('upfile').click()" />
        </div>
<span class="tip left" id="upfileResult">图片大小">图片大小不超过2M,大小90*90,支持jpg、png、bmp等格式。</span>

在网上找了一些文件上传按钮美化的，都不是很好，不兼容Firefox。

以下是我的方法(非常简单，且各浏览器都有很好表现)：

 代码如下 复制代码

HTML:
<input type="file" name="file_0_ture" size="20" onchange="document.getElementById('file_0').value=this.value" class="text opacity"><input name="file_0" id="file_0" value="" class="text"> <input type="button" value="浏览..." class="file_btn">

CSS:
.opacity {opacity:0;FILTER:Alpha(Opacity=0);}
.text {border: 1px solid #c0c1b3;}
.text.opacity {position:absolute;height:20px;}
.text.file {width:129px!important;width:135px;z-index:100;}
.text.file_btn {height:19px;margin:0 0 -1px 0;width:auto!important;width:60px;background:#f0f0f0;padding:;}
时间： 2024-10-23 01:28:45

兼容各浏览器的 input type=file 文件域美化的相关文章

html js java-如何获取Input type=file 所选择文件的绝对路径

问题描述 如何获取Input type=file 所选择文件的绝对路径 是这样的 现在做的一个项目,页面很简单 左边一个input输入框 可以在里面输入url 右边一个search按钮 当输入框没有输入东西的时候,点击按钮弹出一个上传文件选择的框 所选择的文件的 绝对路径会显示在输入框里 如果输入框有东西 URL是否存在,如果存在 则弹出的上传文件选择框定位在所输入的URL上面 但是现在第一步我就不知道怎么做了,除了ie 别的浏览器选择的文件都只显示文件名 请问有什么办法可以获取到所选择文件的绝

前端常见兼容问题系列6: 一些安卓APP的WebView中&lt;input type=&quot;file&quot;&gt;不工作

有一次想做一个HTML5的图片上传功能,主要是依赖<input type="file">来选择本地的图片.开始一切都很顺利,在浏览器中,在淘宝等容器中,都能如预期进行文件选择和上传.在iOS系统下的APP中也都工作正常,但是在一个安卓APP中,无论怎么尝试选择文件,都始终出不来. 我给input的onchange事件打了个alert(),点击时也没有任何反应.看来是<input type="file">在这个容器中根本就不工作. 经过一番检索

判断多个input type=file是否有已经选择好文件的代码_jquery

表单中有多个<input type="file" name="uploadfile" contentEditable="false" style="width:80%">, 提交表单时需要判断其中至少要有一个input已经选择好文件. 复制代码 代码如下: <input type="file" name="uploadfile" contentEditable=&quo

js-如何获得&amp;amp;lt;input type=file&amp;amp;gt;所浏览的本地文件的路径？

问题描述 如何获得<input type=file>所浏览的本地文件的路径? 如何获得所浏览的本地文件的路径?希望各位大神指点哈,急用 解决方案 获取这个没有意义..如果是图片预览看这个:javascript客户端图片预览 解决方案二: input type file 获得文件 组件 总结input type=file accept中可以限制的文件类型从Form 的input type=file 获得不含路径的文件名 解决方案三: 表单提交后,能在后台获取用户选择的文件流信息.文件名称的.是后

不使用 input type file 标签 上传文件

问题描述 我调用别人的方法 返回一个文件路径 这个文件要上传到服务器上,input type file value 不能赋值 有什么办法 可以把个文件 上传到服务器上 问题补充:高级java工程师 写道 解决方案 前台得到路径 传给后台,有httpclient去获取不可以?解决方案二:几种js实现的动态多文件上传方式一:事先写好多个input.在点击时才显示.也就是说上传的最大个数是写死了的. html<p><a href='#' onclick='javascript:viewnone

input type file 获取文件名问题

问题描述 在html页面中上传附件:代码:<input type="file" name="file" id="file"/> 用var fileName = document.getElementById("file").value;得到file的上传路径,但是在IE8或更高版本的IE中得到的路径是:c:fakepathxxx路径,怎么才能得到上传的文件路径那?请高手帮助 解决方案 不行的 在主流浏览器 出于安全

重新定义input[type=file]的样式的例子

在网页制作过程中,有时需要进行上传文件,当然如果需要上传的是图片也是属于文件的. 默认的 <input type="file" /> 的样式如下: 而我们希望使用一张图片代替,点击即可实现上传文件的功能. 希望改成的样式如下: 首先,难点是: 1.不同浏览器的样式表现不同. 2.文字如果只用click这样的方式是不可以的. 3.input 上的文字是没有办法更改的. 实现的想法是:把input 放在图片的上边,弄成透明的,这样在点图片时,实际是点击了input,这样就实现了

js 获取、清空input type=&quot;file&quot;的值

 本篇文章主要介绍了js 获取.清空input type="file"的值(示例代码) 需要的朋友可以过来参考下,希望对大家有所帮助 上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过 javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,那么用户只要打开你的网页, 你

js 获取、清空input type=&quot;file&quot;的值示例代码

 本篇文章主要是对js获取.清空input type="file"的值的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 上传控件基础知识说明:   上传控件(<input type="file"/>)用于在客户端浏览并上传文件,用户选取的路径可以由value属性获取,但value属性是只读的,不能通过javascript来赋值,这就使得不能通过value=""语句来清空它.很容易理解为什么只读,如果可以随意赋值的话,