最近才开始学习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. asp批量查询

    在做asp查询时候 借鉴的一些代码 留个纪念....... <!-- #include file="conn.asp"--> <html> <head ...

  2. 关于ClassLoader的一点小问题

    今天在看某框架的源码的时候,遇到一个使用URLClassLoader加载Servlet类的问题,当自己在eclipse里面做试验的时候,始终无法把Class加载成功.比如: ClassLoader c ...

  3. inotify+rsync目录实时同步

    两台linux服务器系统CentOS7 一台Apache IP:192.168.155.130(发布文件服务器,也可以叫rsync客户端) 一台nginx IP:192.168.155.131(同步镜 ...

  4. JSON下

    JSON下:目录一:把 JSON 文本转换为 JavaScript 对象二:JSON 实例 - 来自字符串的对象 一.把 JSON 文本转换为 JavaScript 对象JSON 最常见的用法之一,是 ...

  5. JAVA线程同步辅助类CountDownLatch

    一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在当前计数到达 ...

  6. 使用exec命令删除前几天产生的日志

    上次学习了访问某个网站并产生相应的日志保存在指定位置,但是时间长了,日志会占用磁盘大量的空间,下面使用exec这个命令删除之前的日志: 命令格式: find 目录绝对路径 -mtime +n(时间) ...

  7. [问题2014A01] 解答三(升阶法,由董麒麟同学提供)

    [问题2014A01] 解答三(升阶法,由董麒麟同学提供) 引入变量 \(y\),将 \(|A|\) 升阶,考虑如下行列式: \[|B|=\begin{vmatrix} 1 & x_1-a & ...

  8. php中的访问修饰符 private、protected、public的作用范围

    1. private 只能在类内部使用 2. protected 可以在类内部和继承类里使用.类外部不能使用[即实例化后的对象无法调用] 3. public 全部范围适用. 4.子类复写父类中的方法时 ...

  9. Nginx 简介

    一.介绍 Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP代理服务器. Nginx是一款轻量级的Web服务器/反向代理服务器以及电子邮件代理服务器,并在一个BSD ...

  10. 《BI项目笔记》多维数据集中度量值设计时的聚合函数

    Microsoft SQL Server Analysis Services 提供了几种函数,用来针对包含在度量值组中的维度聚合度量值.默认情况下,度量值按每个维度进行求和.但是,通过 Aggrega ...