Js/Jquery 实现自定义上传按钮

先上效果图：

Js/Jquery 实现自定义上传按钮

默认的文件上传按钮在各大浏览器上兼容效果很差

Js/Jquery 实现自定义上传按钮

在chrome上直接就没有输入框这针对浏览器测试是一个比较大的麻烦

幸好jquery可以帮助你实现这个自定义的上传按钮的样式的修改

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>File Uploader</title>		
			<link href="css/basic.css" type="text/css" rel="stylesheet" />
			<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script>		
			<script type="text/javascript">
				// Run capabilities test
				enhance({
					loadScripts: [
						'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
						'js/jQuery.fileinput.js',
						'js/example.js'
					],
					loadStyles: ['css/enhanced.css']	
				});   
		    </script>
	</head>
	<body>	
	
	<!-- realistic form attributes: <form action="#" method="post" enctype="multipart/form-data"> -->
	<form action="#">
		<fieldset>
			<legend>Profile image</legend>
			<label for="file">Choose photo</label>
			<input type="file" name="file" id="file" />
			<input type="submit" name="upload" id="upload" value="Upload photo" />
		</fieldset>
	</form>


	</body>
</html>

完整代码请下载

Js/Jquery 实现自定义 上传 按钮

相关推荐

Js/Jquery 实现自定义上传按钮