<!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. [Asp.Net]状态管理（Session、Application、Cache、Cookie 、Viewstate、隐藏域 、查询字符串）

    Session:  1. 客户在服务器上第一次打开Asp.Net页面时,会话就开始了.当客户在20分钟之内没有访问服务器,会话结束,销毁session.(当然也可以在Web.config中设置缓存时间 ...

  2. vs2012快捷键失效解决办法

    快速解决vs开发工具快捷键失效,看图

  3. （转）Javascript面向对象编程（二）：构造函数的继承（作者：阮一峰）

    对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物& ...

  4. EF中的TPH、TPT、TPC

    1. Table Per Hierarchy(TPH):只建立一个表,把基类和子类中的所有属性都映射为表中的列2. Table Per Type(TPT):为基类和每个子类建立一个表,每个与子类对应的 ...

  5. oracle数据库ID自增长

    使用sequence --创建sequenceCREATE SEQUENCE emp_sequence      INCREMENT BY 1  -- 每次加几个      START WITH 1  ...

  6. JS控制文本框textarea输入字数限制的方法

    <html> <head runat="server"> <title></title> <script type=" ...

  7. 《转载》深入理解 cocos2d-x 坐标系

    原文地址:http://www.cnblogs.com/lyout/p/3292702.html. 首先我们添加两个测试精灵(宽:27,高:40)到场景里面: CCSprite *sprite1 = ...

  8. PHP第二课笔记

    ★Php的基本概念 快速入门案例 test.php <html> <body> //<?php  ?>是运行在服务端 <?php   echo 'hello' ...

  9. python bottle使用多个端口（多个进程）提高并发

    我的程序是用python结合bottle框架写的,但bottle自带wsgi原本只是单进程单线程运行模式(Bottle 默认运行在内置的 wsgiref 服务器上面.这个单线程的 HTTP 服务器在开 ...

  10. python保留指定文件、删除目录其他文件的功能(1)

    由于给客户的发布版本上客户改动了些代码和图片,我们这边给他们更新publish都是增量更新(开发提供更新指定的文件,我们提取出来给客户进行覆盖更新),但有时需要更新的文件较多导致不得不一个一个的进行查 ...