<!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. DevExpress ASPxHtmlEditor控件格式化并导出Word (修复中文字体导出丢失)

    在前台页面中先插入一个ASPxHtmlEditor控件,名为ASPxHtmlEditor1. 我用的Dev版本为14.1 格式化文本 在后台插入如下代码  1     const string css ...

  2. Tomcat6+nginx集群，达到负载均衡和session复制

    nginx+tomcat做web项目集群,达到负载均衡.故障转移.session复制功能. 1.nginx配置文件见上一篇“nginx配置文件(反向代理+集群+动静分离)” 2.tomcat集群,修改 ...

  3. silverlight visifire控件图表制作——silverlight 静态页面xaml

    一.silverlight 静态页面 1. 时间控件:DatePicker ,添加引用: xmlns:sdk="clr-namespace:System.Windows.Controls;a ...

  4. SVN - 详细文档

    1.首先打开Cornerstone 2.然后如下图所示: 3.选择对应的仓库,如下图所示 4.然后Import完成之后,就把本地的文件提交到SVN服务器上了,如下图所示,另外如果你想要使用SVN进行版 ...

  5. [POJ] 2785 4 Values whose Sum is 0(双向搜索)

    题目地址:http://poj.org/problem?id=2785 #include<cstdio> #include<iostream> #include<stri ...

  6. [UVA] 11991 - Easy Problem from Rujia Liu? [STL应用]

    11991 - Easy Problem from Rujia Liu? Time limit: 1.000 seconds Problem E Easy Problem from Rujia Liu ...

  7. 手把手教你清除WIN7的C盘垃圾

    WIN7系统用着用着C盘会变得越来越大,可用空间变得越来越小,磁盘清理,和安全卫士怎么清也清不出这些系统深度的垃圾.我们可以手动删除,释放C盘空间. 这样一清理下来,结果我的C盘就释放了近10个GB的 ...

  8. Keil C51中函数指针的使用

    函数指针在C语言中应用较为灵活.在单片机系统中,嵌入式操作系统.文件系统和网络协议栈等一些较为复杂的应用都大量地使用了函数指针.Keil公司推出的C51编译器是事实上80C51 C编程的工业标准,它针 ...

  9. WINDOWS 2012忘记密码之后。。。

    要使用windows server 2012安装DVD,选择光盘引导进入 进入修复系统 选择疑难解答,进入界面 选择命令提示符 切换目录至系统目录 执行move命令 执行 copy命令 重新启动系统, ...

  10. java设计模式--行为型模式--策略模式

    策略模式: 策略模式 概述 定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.本模式使得算法可独立于使用它的客户而变化. 适用性 1.许多相关的类仅仅是行为有异.“策略”提供了一种用多个行 ...