`

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

jqueryjsinput上传 
阅读更多

先上效果图：

http://dl.iteye.com/upload/attachment/0070/2277/ea085fc3-f0bc-3122-8c3e-b590629d433c.png

 

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

http://dl.iteye.com/upload/attachment/0070/2275/47c44db2-2eca-3c28-90f1-f50814dc62d3.png

 

在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>

 完整代码 请下载

  • 大小: 10.9 KB
  • 大小: 2.9 KB
1
顶
3
踩
分享到：
| 取消 wordpress 的分类 置顶
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics