模拟input type=file

表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；

通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。

HTML代码如下：

</form>
</div>

这是一个基本的input type=”file”。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框和按钮追加到html中。

注意：size=”28″是在firefox下input type=”file”的宽高是不能通过样式来定义的，所以用了size属性来控制input type=”file”的宽度

CSS代码如下：

.type-file-box {
    position:relative;
    width:260px
}
input {
    vertical-align:middle;
    margin:0;
    padding:0
}
.type-file-text {
    height:22px;
    border:1px solid #cdcdcd;
    width:180px;
}
.type-file-button {
    background-color:#FFF;
    border:1px solid #CDCDCD;
    height:24px;
    width:70px;
}
.type-file-file {
    position:absolute;
    top:0;
    right:0;
    height:24px;
filter:alpha(opacity:0);
    opacity: 0;
    width:260px
}

注意：这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明，这样用户看不到input type=”file”。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的input type=”file”；

js代码：

$(function () {
    var textButton = "<input type='text' name='textfield' id='textfield' class='type-file-text' />  <input type='submit' name='button' id='button' value='浏览...' class='type-file-button' />"
    $(textButton).insertBefore("#fileField")；
    $("#fileField").change(function () {
        $("#textfield").val($("#fileField").val());););

这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值，OK了

demo演示：http://www.css88.com/demo/input-file/

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《模拟input type=file》

模拟input type=file相关推荐

input type=file 标签禁止让用户手动输入
常规的Web应用程序中涉及到文件上传的部分都不可避免地会使用到<input type="file"/>控件,在上传文件的时候通过点击"浏览"按钮,在 ...
input type=file 禁止让用户手动输入
1. 取代法使用隐藏的<input type="file"/>控件,然后用一个只读的文本框和一个按钮来模拟<input type="file" ...
自定义input type=file 样式的方法
为什么80%的码农都做不了架构师?>>> 为什么要美化file控件?试想一下,别的孩子都穿戴整齐漂亮,其中两个孩子怎么都不鸟你,太不和谐了. 原始的file控件是这样的: &l ...
input type=file 实现上传、预览、删除等功能
不知何时,突然对上传文件按钮起了浓厚的兴趣,当然这源于工作的需要.当时为了顺利上线,索性直接引用了jQuery的一个上传组件,简单粗暴. 后来闲下来,就对这个进行了一番研究,然后做了一个简单的Demo ...
input type=file美化
最近碰到input type=file 之前用模拟点击来实现美化,发现在IE7下会有bug导致图片上传不上去,最后改用直接美化的方法 <!DOCTYPE html> <html la ...
java注解接收上传文件,前台：Input type=file 后台获取文件内容用的是spring注解，当地环境上传图片是好的，发布到服务器上图片读取不到，求大神指点...
当前位置:我的异常网» Java Web开发 » 前台:Input type="file" 后台获取文件内前台:Input type="file" 后台获取文 ...
利用css对input[type=file] 样式进行美化，input上传按钮美化
2019独角兽企业重金招聘Python工程师标准>>> <input type="file" name="fileUpload"/> ...
js 获取input type=file 文件，并且上传
html页面: <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png, ...
Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...

模拟input type=file

模拟input type=file相关推荐

最新文章

热门文章