<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定义input type="file" 的样式</title>
<style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
</head>
<body>
<div class="file-box">
<form action="" method="post" enctype="multipart/form-data">
<input type='text' name='textfield' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...' />
<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
<input type="submit" name="submit" class="btn" value="上传" />
</form>
</div>
</body>
</html>

自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)的更多相关文章

  1. 一个漂亮的上传按钮input[type=file]

    ;;} <div class="input-group xj-file xj-panel-top"> <span class="input-group- ...

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

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

  3. type=file的inpu美化，自定义上传按钮样式

    <div class="div1"> <div class="div2">点击上传</div> <input type ...

  4. 兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

    (uploadify版本:3.2.1 ) 因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify. 由于是基于flash的,所以使用过程中,难以给 ...

  5. python+selenium：解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  6. 用jQuery重置用于文件上传的input (type="file")

    页面中有如下标签: <input type="file" id="upload"/> 此标签本用于文件上传,现在有需要将其值重置为空.于是想当然地写 ...

  7. 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。

    一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...

  8. el-upload自定义上传文件，并携带其余参数，且action不报错

    用el-upload组件自定义上传按钮,并携带其余参数,且必传参数action 不报错 <template> <el-col :span="6" :mode=&q ...

  9. webuploader 百度上传，一个页面多个上传按钮

    需求:列表里每条数据需加文件上传 html: <div> <ul class="SR_wrap_pic"></ul> <button ty ...

随机推荐

  1. 小结： Async & Await

    新项目组用到Async & Await, 关于Await会不会新开不开线程,遇到什么情况会新开线程的问题网上查了很多资料都没看到直观的解释.现简单总结一下. 直接上代码: namespace ...

  2. 如何让div横向排列

    方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...

  3. Gradle 编译时选择不同的 google-services.json

    在做的安卓应用需要在 debug 和 release build中使用不同的谷歌服务账号,要用到不同的google-serivces.json ,手动替换的话太费时费力,好在万能的gradle可以完成 ...

  4. CUICatalog: Invalid asset name supplied:

    [UIImage imageNamed:name];但是这个name却是空的,所以就报了这个错了. 解决方法,在项目中搜索UIImage imageNamed:,然后打印看看所谓的name是否为空.找 ...

  5. Linux知识扫盲

    1.发现linux中好多软件以d结尾,d代表什么? d 代表 deamon 守护进程守护进程是运行在Linux服务器后台的一种服务程序.现在比较常用 是 service 这个词.它周期性地执行某种任务 ...

  6. HDU 1269 裸奔的强联通分量

    看了别人博客  http://blog.csdn.net/jokes000/article/details/7538994 #include <cstdio> #include <c ...

  7. php array_combine 把array的默认键改成指定的字符串

    array(2) { [0] => array(6) { [0] => string(1) "1" [1] => string(10) "1470650 ...

  8. php 实时推送代码

    网站质量不错的网站可以在百度站长平台/数据提交/sitemap栏目下看到实时推送的功能, 目前这个工具是邀请开放, 百度的实时推送的api接口可以实时推送我们新发布的文章, 保证百度在第一时间收录. ...

  9. MHA环境搭建【3】node相关依赖的解决

    mha的node软件包依赖于perl-DBD-Mysql 这个包,我之前有遇到过用yum安装perl-DBD-MySQL,安装完成后不能正常使用的情况,所以这里选择源码编译安装: perl5.10.1 ...

  10. SEO教程：向百度要流量 第一季

    首先祝贺你:当你看到这篇文章时,你已经站在一条通往SEO达人捷径的路口. 笔者也是今年年初才成为SEOer的一员,在做SEO的过程中,有不少自己独特的心得体会,所以一直酝酿着写一个SEO系列的文章,将 ...