自定义input type=”file”元素的样式 (完全隐藏文件框)
为了保证不同浏览器下的UI一致我们有需求要自定义input type=”file”元素的样式
1. 隐藏input type=”file”
2. 用CSS将a+span做成按钮样式,对其做事件绑定,点击之后触发input type=”file”的点击事件
3. 用input type=”text”显示input type=”file”选中文件的值
HTML
<input type="image" id="album_img" src="/image/album_default.png">
<input id="album_file" type="file" title="选择发送图片" style="visibility: hidden" />
CSS
input[type='image']{
width:auto;
height:auto;
max-width:80%;
max-height:80%;
margin: 5px;
vertical-align: middle;
background:#f4f4f4;
cursor: pointer;
padding: 9px;
border-radius:3px;
border: 1px solid #c6c6c6;
outline:none;
}
input[type='image']:hover {
background-color: #e1e1e1;
}
input[type='image']:active {
background-color: #c6c6c6;
}
JavaScript
$(function() { $('#album_img').click(function(event) { event.preventDefault(); $('#album_file').trigger('click'); }); //this works for FF, easy job $('#album_file').bind('change', function() { changeFile(albumfileInput.id); }); }); var changeFile = function (controlId) { var path = getControl(controlId).value; var suffixIndex = path.lastIndexOf('.'); if (suffixIndex != -1 && path.length > suffixIndex) { var pathSuffix = path.substring(suffixIndex + 1, path.length); if (null != pathSuffix && (pathSuffix.toLowerCase() == 'png' || pathSuffix.toLowerCase() == 'jpg' || pathSuffix.toLowerCase() == 'jpeg' ) ) { window.console.info('图片上传代码'); } else { window.console.info('请选择常用的图片格式(png/jpg/jpeg)'); return; } } else if (path === '') { return; } else { window.console.info('请选择正确的图片'); return; } }
问题1. FireFox下不会显示文件全路径(google得知这是FF的安全考虑,不影响form提交)
问题2. IE下选择文件后不会触发change事件,原因是IE处理打开文件的机制(参考下面的链接看更多讨论)
对于IE8,这个问题的解决办法如下,setTimeout会阻塞,直到文件选择器关闭之后,回调函数才被调用(更新用来显示的input type=”text”的值)
if ($.browser.msie) { $('#theFile').bind('click', function() { //this solution works for IE8, not Maxthon2, so seems not IE6 either(not tested) setTimeout(function() { alert('[IE8] setTimeout get called after open file dialog was closed'); changeCallBack(); }, 0); }); }
就是说IE不blur的话file不触发change事件,解决办法是设置一个setTimeout,然后再0毫秒后执行,利用文件选择框的阻塞。