input type=file 如何达到去除输入框效果
来源:互联网 发布:淘宝第五大道是正品吗 编辑:程序博客网 时间:2024/05/16 03:51
<input type=“file”>输入框中做到去除输入框效果
在我平时修改页面的时候,由于需要用到上传文件这一功能的时候,需要用到 <input type="file">,但是效果却不尽人意。如下图:
此时显示的按钮部分(选择文件)与文字部分(未选择任何文件)当你点击时都能够弹出上传文件的选择框进行选择,但这放在页面中显示是不尽人意的。最理想的效果就是能够去除文字部分,只留下按钮部分。
下面是我想到的如何解决这一问题的方法:
由于<input type="file">自带默认的样式,无法去简单的修改。那么,我想到的是用一个自己创建的按钮去替代这一部分,因为需要的只是点击‘选择文件’按钮后出现选择框这一功能。那么,利用点击新建的按钮(这个按钮的样式能够用css去修改样式)时触发点击事件,用新建按钮的点击事件来触发<input type="file">
接下来是代码演示:
<input type='text' id='textfield' class='txt' /><input type='button' class='btn' value='浏览...'onclick="document.getElementById('fileField').click()" /><input type="file" id="fileField"class="file" size="28" onchange="document.getElementById('textfield').value=this.value" />
这里有三个input,第一个是用来显示上传路径的输入框(如果不需要可省去,那么左侧的输入框就会消失),第二个就是用来显示的浏览按钮,第三个是真正用来弹出选择框的按钮,但在页面中不显示。
点击后出现:
此处只显示第三个input的css样式,前两个可以在页面中显示的可以自行修改:
.file{ filter:alpha(opacity:0);opacity: 0;width:0px }
这里将opacity和width设置为0,这样在页面中无法看见,另外也无法被点击到。
可以看到我用第二个按钮的onclick事件来触发了第三个的点击事件,就能达到相同的效果
这里分享的是我平常遇到的小问题,希望能够帮助到您0v0!
阅读全文
0 0
- input type=file 如何达到去除输入框效果
- <input type="file">禁止用户输入
- 去除<input type='file'>右边路径方法
- 如何修改input type="file"样式
- input type="file"
- input type=file
- input type=file 标签禁止让用户手动输入
- input type=file 标签禁止让用户手动输入
- input type=file 禁止让用户手动输入
- input type=file 标签禁止让用户手动输入
- input type=file 禁止让用户手动输入
- 屏蔽 文件上传框 input type='file' 的输入功能
- 文件选择器(input type="file")如何reset
- <input type="file"/>如何获取判断获取文件后缀
- jquery如何清空<input type="file"/>的内容
- 如何获取input type=file的路径
- 如何修改input[type="file"]的默认样式
- input type=file hack
- leetcode刷题-堆栈3
- 利用HttpUrlConnection 上传 接收文件的实现方法
- 1004. Counting Leaves (30)
- Etherlab源码解析----同步管理器SM配置(邮箱通信)
- 11.2笔记整理及作业
- input type=file 如何达到去除输入框效果
- java访问https请求
- 两个栈实现一个队列
- 服务器
- Unity3d 插件研究之EasyTouch插件
- jfinal之使用模板导出excel文件
- bezierpath 常用方法备注一
- ES6-数值的扩展-Math对象的扩展
- JZOJ 5445. 【NOIP2017提高A组冲刺11.2】失格