最近才开始学习HTML,在练习表单的过程中,发现在使用<input type="file"/>这个类型的元素,产生的文件框和浏览按扭,它们的样式往往不符合我们的需要。怎么改变呢,我上网搜索了一些方法,说的是设置将file隐藏,然后用一个按钮覆盖就可以了,我总结了一下之后,具体方法如下:

1、放一个text类型的文本框。
   2、放一个button类型的按扭。
   3、放一个file类型。
   4、调整button和file的样式,目标:将file隐藏,使其位置和button位置重叠。
   5、当上传框file的值有所改变时通过onchange事件句柄执行text.value=this.value,即保持真正的上传框与模拟的上传框的值同步更新。

具体的代码如下:

<input type="text" name="txt">
<input type="file" name="fil" style="display: none" onchange="txt.value=this.value">
<button onclick="fil.click()">浏览...</button>
就这样轻松解决了

<input type="file">中怎设置那个按钮的样式的更多相关文章

  1. javaWeb - 2 — ajax、json — 最后附:后台获取前端中的input type = "file"中的信息 — 更新完毕

    1.ajax是什么? 面向百度百科一下就知道了,这里就简单提炼一下 Ajax即Asynchronous Javascript And XML(异步JavaScript和XML).当然其实我们学的应该叫 ...

  2. input[type=file]中使用ajaxSubmit来图片上传

    今天在使用input[type=file]上传图片到服务器时,因为项目要求,并不是像常见的通过按钮来提交表单事件,而是图片上传后就自动执行表单提交事件,将上传的图片信息传给服务器. 刚开始我是这样执行 ...

  3. input type="file"在各个浏览器下的默认样式,以及修改自定义样式

    一.<input type="file"/>在各个浏览器中的默认样式: 系统 浏览器 样式效果 点击效果 mac google 点击按钮和输入框都可以打开文件夹 mac ...

  4. JQuery------获取<input type="file">中的文件内容

    html <div class="File">添加附件</div><input id="upfile" name="up ...

  5. HTML5读取input[type=file]中的图片

    转载 https://blog.csdn.net/fd214333890/article/details/71250488

  6. 有关图片上传的相关知识input type=file,HTML5的 input:file上传类型控制

    遇到项目,要求做一个影像系统,对于前端开发需要了解file的相关属性,以及如何开发.工欲善其事,必先利器嘛.度娘一阵子搜索,找资料.这年头,需要的是你解决问题的能力啊! 参考应用:https://ww ...

  7. input type="file"使用

    问题: 在实际开发过程中,会遇到上传文件的一些需求.但是使用原生的<input type="file" />在使用中存在一些问题 在未上传文件时,显示"no ...

  8. 文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】

    首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件< ...

  9. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

随机推荐

  1. Dynamics AX 2012 R2 从代码中调用SSRS Report

    平时,我们制作SSRS Report的方法主要有两种:使用Query或RDP.如果需要为报表传递参数,就要在代码中为报表参数赋值,然后在代码中调用报表.下面我总结下这两种报表在代码中传参和调用的方式: ...

  2. jQuery 选择器 (基础恶补)

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  3. [转]SOCKET通信中TCP、UDP数据包大小的确定

    TCP.UDP数据包大小的确定 UDP和TCP协议利用端口号实现多项应用同时发送和接收数据.数据通过源端口发送出去,通过目标端口接收.有的网络应用只能使用预留或注册的静态端口:而另外一些网络应用则可以 ...

  4. 为linux系统添加虚拟内存swap分区

    阿铭linux学习笔记之swap分区 一.作用: swap分区是交换分区,在系统物理内存不足时与swap进行交换,对web服务器的性能影响极大,通过调整swap分区大小来提升服务器的性能,节省资源费用 ...

  5. 继续Kanzi

    转眼间,Kanzi已经发展到3.3版本了,之前研究过的东西,今天有空下了个版本跟进更新看看有没有什么变化.新的引擎跟以前2.x版本有很大的差别.新引擎增加了很多新功能(包括局部刷新技术),也跟随大潮加 ...

  6. 反编译CHM文件

    1.进入dos 2.输入 HH.EXE -decompile <输出路径> <目标chm文件> 例如:hh.exe -decompile d:\heihei D:\123.ch ...

  7. 基础笔记3(一)(String StringBuilder StringBuffer 数组)

    ---恢复内容开始--- 1数组.有序的同类型的集合. 2.string :字符串类型:其实就是一个字符数组.添加了private final,所以string是一个不可以变的字符串. String. ...

  8. pytessact 出现Error2错误

    x pytessact安装后不起作用 一.没有安装tessact-ocr 点击下载,安装 http://jaist.dl.sourceforge.net/project/tesseract-ocr-a ...

  9. 基于gulp 的前端自动化构建方案总结

    一,基础篇 先安装nodejs 使用淘宝镜像安装tnpm 安装 cnpm 插件:npm install -g cnpm --registry=https://registry.npm.taobao.o ...

  10. Deep Learning 12_深度学习UFLDL教程:Sparse Coding_exercise(斯坦福大学深度学习教程)

    前言 理论知识:UFLDL教程.Deep learning:二十六(Sparse coding简单理解).Deep learning:二十七(Sparse coding中关于矩阵的范数求导).Deep ...