先上效果图：
默认的 文件上传按钮 在各大浏览器 上兼容效果很差
在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>完整代码 请下载
628
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
