问题：

HTML自带的file上传按钮因在各种浏览器里显示样式不一、不易自定义样式给我们带来很大的麻烦。

解决思路：

将input[type=file]控件隐藏，使用一个input[type=text]和button组合作为file控件的替代（样式自行定义），并将隐藏的file控件和作为替代的text和button控件做事件同步关联，这样我们在操作text和button的时候，同时触发file控件，表单提交时，file控件提交。

示例代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>文件上传</title>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</head>

<body>

<form name="frm" id="frm" action="/remote_service/upload2/parseRuleFilePath.htm" method="post" enctype="multipart/form-data">

    <input type="text" name="fileShowName" id="fileShowName" readonly="readonly" />

    <!-- 按钮的onclick事件关联file的onclick事件，点击按钮效果等同于点击file控件 -->

    <input type="button" id="fileButton" name="fileButton" value="浏览" onclick="$('#submitFile').click();" />

    <!-- 隐藏的file控件值改变时同步更新到text上 -->

    <input name="submitFile" id="submitFile" type="file" style="display: none;"

                   onchange="$('#fileShowName').val($(this).val());" />

    <input type="submit" value="提交" />

</form>

</body>

</html>




												


											
html文件上传控件file自定义样式的更多相关文章
	

    
								
  1. 重置表单中的文件上传控件(file input)的方法
		
    方法一: 调用所在 form 表单的 reset 方法,这个方法的缺点是会把整个表单重置,需要存储表单的状态,再回填回去 方法二: 使用jQuery,代码为: $("#id").r ...
    
		
    2. 
						
  2. jquery文件上传控件 Uploadify
		
    (转自 http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html) 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
    
		
    3. 
						
  3. jquery文件上传控件 Uploadify   可以和ajax交互
		
    http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html  原网址 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同 ...
    
		
    4. 
						
  4. jquery文件上传控件 Uploadify（转）
		
    原文:http://www.cnblogs.com/mofish/archive/2012/11/30/2796698.html 基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上 ...
    
		
    5. 
						
  5. 使用Uploadify(UploadiFive)多文件上传控件遇到的坑
		
    最近项目中需要实现多文件上传功能,于是结合需求最终选择了Uploadify这一款控件来实现.相比其他控件,Uploadify具有简洁的界面,功能API基本可以解决大多数需求,又是基于jquery的,配 ...
    
		
    6. 
						
  6. jquery文件上传控件 Uploadify 问题记录
		
    Uploadify v3.2.1 首先引用下面的文件 <!--上传控件 uploadify--> <script type="text/javascript" s ...
    
		
    7. 
						
  7. 在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件（转）
		
    引言 这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过“我现在可以通过WebBr ...
    
		
    8. 
						
  8. 对FileUpload文件上传控件的一些使用方法说明
		
    //创建时间:2014-03-12 //创建人:幽林孤狼 //说明:FileUpload文件上传控件使用说明(只是部分)已共享学习为主 //可以上传图片,txt文档.doc,wps,还有音频文件,视屏 ...
    
		
    9. 
						
  9. 通过winForm控制webForm的上传控件file的值
		
    文件上传是日常开发中经常遇到的,文件上传用的最多的当然是上传控件file了,一个form表单,其中有一点就是form表单的enctype属性设置为multipart/form-data,呵呵,这个在所 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【CF888E】Maximum Subsequence 折半搜索
			
    [CF888E]Maximum Subsequence 题意:给你一个序列{ai},让你从中选出一个子序列,使得序列和%m最大. n<=35,m<=10^9 题解:不小心瞟了一眼tag就一 ...
    
			
    2. 
						
  2. 大话FLASH和EEPROM
			
    最近在看代码的时候,遇到了一个使用FLASH模拟EEPROM的情况,看到这个我当时是一脸蒙蔽啊,对于一个有时候连FLASH和EEPROM都分不清的人来说,怎么可能读懂用FLASH来模拟EEPROM呢? ...
    
			
    3. 
						
  3. 【巷子】---fetch---基本使用
			
    一.fetch fetch是一种XMLHttpRequest的一种替代方案,在工作当中除了用ajax获取后台数据外我们还可以使用fetch.axios来替代ajax 二.fetch的基本使用 1.np ...
    
			
    4. 
						
  4. Python内置函数之isinstance,issubclass
			
    isinstance判断一个变量的类型 >>> n1 = 10>>> isinstance (n1,int)True 判断n1是否是数字类型,如果是返回True如果 ...
    
			
    5. 
						
  5. Scikit-Learn实战KNN
			
    Scikit-Learn总结 Scikit-Learn(基于Python的工具包) 1.是一个基于Numpy,Scipy,Matplotlib的开源机器学习工具包. 2.该包于2007年发起,基本功能 ...
    
			
    6. 
						
  6. 计蒜客 30996 - Lpl and Energy-saving Lamps - [线段树][2018ICPC南京网络预赛G题]
			
    题目链接:https://nanti.jisuanke.com/t/30996 During tea-drinking, princess, amongst other things, asked w ...
    
			
    7. 
						
  7. codeforces 798B - Mike and strings
			
    感觉自己好咸鱼呀……B题写了这么久,虽然可以算作1A(忽略一次少include一个头文件的CE)…… 思想很简单,每次选定一个字符串作为目标字符串,然后把其他所有字符串都当做测试字符串,计算出总共需要 ...
    
			
    8. 
						
  8. hdu-4283 You Are the One 区间dp，
			
    题意:n个人排队上台,每个人有一屌丝值D,他的不满意值=D*(k-1)(k为他前面的总人数). 求整个队列不满意值之和的最小值.你只有一个操作,就是把队首的人塞进小黑屋,也就是压入栈中,后面的人就被提 ...
    
			
    9. 
						
  9. Python面向对象：获取对象信息
			
    学习笔记内容简介: 获取对象属性和方法的函数: type(): 判断对象类型 isinstance() : 判断class的类型 dir() : 获得一个对象的所有属性和方法 把属性和方法列出来是不够 ...
    
			
    10. 
						
  10. android 控制POS机图文打印（二）
			
    上一篇文章结束了ESC/POS的指令集,没看过的可以去看一下,可以当作工具文档来使用的 android 控制POS机图文打印(一) 这一篇正式介绍如何使用POS机来打印图文信息. 首先介绍一下,ESC ...
    
			
    11.