<!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下)
时间： 2024-08-26 10:40:05
自定义上传按钮 <input type="file" name = "file"/> (将file隐藏在button下)的相关文章
文件上传按钮input[type="file"]按钮美化时在IE8中的bug【兼容至IE8】
首先看一下完成后的效果,鼠标移入可改变为手指的效果. 在此就不加图标了 <label class="file-upload"> <span>上传附件</span> <input type="file" name=""> </label> 在IE8中需要将input透明后还不能完全达到效果,还需要将字体设大一些,撑开input,这是IE自带的兼容问题. .file-upload{ disp
用jQuery重置用于文件上传的input (type="file")
页面中有如下标签: <input type="file" id="upload"/> 此标签本用于文件上传,现在有需要将其值重置为空.于是想当然地写出如下代码: $('#upload').val(''); 但经测试,该处理方法对IE无效,因为IE不允许javascript改变type为file的input的值,又是让人蛋疼的IE... 在浏览器兼容性方面本人是白痴一个,遂放狗一搜,有解决方案如下: if(ie) { // 此处判断是否是IE $('#up
自定义上传按钮样式
效果体验:http://runjs.cn/detail/crltmoya <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #fileInput1 { cursor:pointer; opacity:0; } div{ width:300px; height:200px; backgroun
css input[type=file] 样式美化，input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的,后面文章会总结. 思路: input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能. 代码如下: DOM结构: <a href="javascript:;" class="a-upload"> <input type=
Chrome浏览器点击 input file上传按钮时延迟3-5秒的解决方法
1. Google chrome 浏览器在52版本之后出现一个bug,就是点击 input file上传按钮时反应很慢,需要等待3-5秒种之后才能弹出选择文件的对话框.比如 windows里可能是这样: MAC里可能是这样:
CSS自定义文件上传按钮
原文:CSS自定义文件上传按钮 今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: 两边的按钮都有了样式,但中间的选择文件的样式死活调不出来,于是我就同他一块解决,后来经过自己设置width,height折腾无果,再求助google终于找到了解决办法,这个方法是这样的: 用一个标签套着文件域,然后调整文件域外边的元素,设置成按钮样式,然后,在把文件域"隐藏"掉(这里的隐藏
用jQuery File Upload做的上传控件demo，支持同页面多个上传按钮
需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址 最简运行时 官网下载的demo有N多
文件上传按钮的用户自定义样式的实现
一般在做 WEB 开发项目的时候碰到文件上传必不可少,但是因为各家浏览器对于 <input type="file"> 标签支持不同所以在各个浏览器下的显示也是不一样的.可能在用户体验方面会形成困扰,今天就给大家介绍一下文件上传按钮的用户自定义样式的实现. 实现原理: 建立两个层,一个层包装 <input type="file"> 以下简称文件按钮层,一个层包装上传文件按钮的自定义样式,以下渐层样式层.设置两个层的大小一致,将文件按钮层设置相对
Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮--推荐使用
今天帮朋友解决 Plupload 上传的问题,查了很多资料,资料还是挺全的,但是有点零零散散的,故整理好,合并发出来. 本教程包括: Plupload 上传详细讲. Plupload 多实例上传. Plupload 多个上传按钮. Plupload 上传成功获取返回值. 我们来看一个比较全的 Plupload Demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8">