Js/Jquery 实现自定义 上传 按钮
先上效果图：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 testenhance({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> 完整代码 请下载
页:
[1]