File文件上传,不同浏览器统一表示
2013-05-20 17:10
344 查看
HTML markup
<div class="file-wrapper"> <input type="file" /> <span class="button">Choose a file</span> </div>
jQuery
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var SITE = SITE || {}; SITE.fileInputs = function() { var $this = $(this), $val = $this.val(), valArray = $val.split('\'), newVal = valArray[valArray.length-1], $button = $this.siblings('.button'), $fakeFile = $this.siblings('.file-holder'); if(newVal !== '') { $button.text('File Chosen'); if($fakeFile.length === 0) { $button.after('<span class="file-holder">' + newVal + '</span>'); } else { $fakeFile.text(newVal); } } }; $(document).ready(function() { $('.file-wrapper input[type=file]').bind('change focus click', SITE.fileInputs); }); </script>
Css
<style type="text/css"> .file-wrapper { position: relative; display: inline-block; overflow: hidden; cursor: pointer; } .file-wrapper input { position: absolute; top: 0; right: 0; filter: alpha(opacity=1); opacity: 0.01; -moz-opacity: 0.01; cursor: pointer; } .file-wrapper .button { color: #fff; background: #117300; padding: 4px 18px; margin-right: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; display: inline-block; font-weight: bold; cursor: pointer; } .file-holder{ color: #000; } </style>
实例:http://1stwebmagazine.com/demo/styling-input-file-with-jquery-and-css.html
原著:http://1stwebmagazine.com/styling-input-file-with-jquery-and-css
相关文章推荐
- ajaxFileUpload.js上传图片插件,全浏览器兼容,规避json错误,带文件格式大小拦截
- 在struts2中上传图片 浏览器解析文件的不同类型
- 针对不同浏览器预览上传文件的处理方式
- 不同浏览器对上传的zip文件格式的mime类型解释
- Webx框架Velocity上传文件控件不同浏览器显示兼容处理
- JS判断文件大小-文件上传-浏览器-input-file
- windows系统中的浏览器(支持html5的),用html5上传word文件获取到的file.type值为空,ios系统则能获取到
- 用file上传文件时,浏览器返回值总是自动添加<pre>的解决办法
- CSS -- file上传,多个浏览器统一样式
- 解决微信内嵌浏览器无法响应<input type='file'>上传文件的思路
- 使用input type=file标签进行文件上传时,在安卓手机中的微信浏览器中不能调起相机,但是在苹果手机中的微信浏览器中可以调用相机。解决办法很简单, <input type="file" nam
- 不同浏览器对post上传文件时,文件名的处理方式不同。
- springMVC多文件上传不同name的file
- Firefox浏览器中,Flex的FileReference上传文件,引发IOError
- JAVA 文件上传后台判断浏览器的类型以及JDK1.5和1.6处理的不同
- ASP 使用 jQuery Ajax File Uploader插件上传文件(适用于支持H5的浏览器)
- input file上传文件样式支持html5的浏览器解决方案
- input标签file类型,去除不同浏览器“未选择文件”字样办法
- autoit对不同的浏览器录制上传文件脚本,脚本内容会不一样
- 解决微信内嵌浏览器无法响应<input type='file'>上传文件的思路