<!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. FineUI表单验证

    自动编码文本 默认情况下,Label的EncodeText属性为true,会对文本中的HTML进行编码.当然我们也可以设置EncodeText=false,从而将HTML片段赋值给Text属性,请看这 ...

  2. 在App中混合HTML5开发App如何实现的。在App中使用HTML5的优缺点是什么？

    参考答案: 在iOS中,通常是通常UIWebView来实现,当然在iOS8以后可以使用WKWebView来实现.有以下几种实现方法: 通过实现UIWebView的代理方法来拦截,判断scheme是否是 ...

  3. IOS中对于一些控件的抖动效果

    这两天在网上看到一个帖子讨论关于有些app 输入账密时候 错误的话会有抖动效果出现,然后自己琢磨了下如何实现,下面上代码!!! 首先 写一个UIView的分类 #import <UIKit/UI ...

  4. CString 字符串转化和分割

    1.格式化字符串 CString s;s.Format(_T("The num is %d."), i);相当于sprintf() 2.转为 int 转10进制最好用_ttoi() ...

  5. 解决mini2440开发板和虚拟机相互ping不通

    很奇怪的事,前段时间使用都还是好好的,但今天不知什么原因开发板和虚拟机怎么也无法PING通. 虚拟机用的:fedora14 开发板IP:192.168.0.250 虚拟机IP:192.168.0.10 ...

  6. seajs模块压缩问题

    在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁 ...

  7. 04--帮助类ScreenAdapter编写

    使用VS类向导添加ScreenAdapter,在Num2048项目上右键选择"添加"->"类",然后将生成的两个文件拖放到Classes文件夹中      ...

  8. cocos2dx ——屏幕适配

    本文出自 “夏天的风” 博客,请务必保留此出处 http://shahdza.blog.51cto.com/2410787/1550089 手机的屏幕大小千差万别,如现在流行的安卓手机屏幕大部分长宽比 ...

  9. 拉姆达表达式 追加 条件判断 Expression<Func<T, bool>>

    public static class PredicateBuilder { /// <summary> /// 机关函数应用True时:单个AND有效,多个AND有效:单个OR无效,多个 ...

  10. hdu 1111 Secret Code

    http://acm.hdu.edu.cn/showproblem.php?pid=1111 复数除法: #include <cstdio> #include <cstring> ...