<!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. c#、sql数据库备份还原

    1.在项目中添加SQLDmo dll文件引用(SQLDMO(SQL Distributed Management Objects,SQL分布式管理对象)) 2在相应页面加using SQLDMO引用 ...

  2. [MVC4-基礎] 使用DataAnnotations+jQuery進行表單驗證

    我目前有以下表單,Select部分因為必須上一層有選擇下層才有資料,因此使用jQuery驗證問題類型是否有選擇就好,而問題描述要驗證是否為空,這裡採用MVC內建的DataAnnotations來驗證. ...

  3. 后台写js 并跳转

    Response.Write("<script>alert('成功');location.replace('ApplyClass.aspx')</script>&qu ...

  4. Solr导入数据库数据

    接Solr-4.10.2与Tomcat整合.1.在solrconfig.xml中添加数据导入节点,solrconfig.xml路径为D:\solr\data\solr\collection1\conf ...

  5. 关于局域网内IIS部署网站，本机可访问，而网内其他用户无法访问问题的解决方法

    在Window7操作系统中安装配置好IIS后,在本地IIS上部署网站程序没有问题,但是局域网等远程用户不能正常访问网站程序,提示“Internet Explorer 无法显示该网页”. 问题解决思路如 ...

  6. java必备基础知识（一）

    学习的一点建议: 每一门语言的学习都要从基础知识开始,学习是一个过程,"万丈高楼平地起",没有一个好的地基,想必再豪华的高楼大厦终究有一天会倒塌.因此,我们学习知识也要打牢根基,厚 ...

  7. Spring AOP之异常转换

    Spring-AOP之异常转换 引子 最近项目遇到了一个问题,就是说业务层向展现层需要转换成统一个异常类,并抛出异常,但是由于业务层的异常类过多,所以导致业务异常转换代码充斥着异常转换的代码,本着程序 ...

  8. ASP转PHP手记

    打算将动易网站管理系统移植到PHP环境中,寻寻觅觅了很多PHP内容管理网站,发现网上有动易转PHPCMS的代码,所以就拿定注意用PHPCMS的在google上找到一转换程序,动手做来还成功了,现将此次 ...

  9. eclipse Content Assist 无法使用，不能自动补全的解决办法

    今天用eclipse写JAVA代码,写着写着突然,eclipse 的自动补全功能失效了,没办法自动补全.折腾半天,终于解决了. 在window->Preferences->Java-> ...

  10. NOD32强制卸载工具使用方法【转】

    装了ESET NOD32又忘记密码了,无法卸载,怎么办? 以下转自官网:http://faq.eset.com.cn/index.php?pid=254 [适用产品:ESET NOD32 防病毒软件4 ...