我很高兴浏览器关心将我们从侵入性脚本等中拯救出来。我不满意IE在浏览器中添加一些使简单的样式修复看起来像黑客攻击的东西!
我使用<span>表示文件输入,以便可以对<div>而不是<input>应用适当的样式(再次,由于IE)。现在,由于该IE,我们希望向用户显示一条路径,该路径的值仅能保证使他们警惕,并且至少可以使他们感到忧虑(如果不能完全吓退他们呢!!)……更多IE-CRAP!
无论如何,这要归功于那些在此处发布说明的人:IE浏览器安全性:在输入[type =“ file”]中将“ fakepath”追加到文件路径,我整理了一个小的修复程序...
下面的代码有两件事-修复了IE8的IE8错误,该错误在上载字段的onBlur之前不会触发onChange事件,并且它使用不会吓到用户的干净文件路径更新元素。
// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
// document onReady wrapper
$().ready(function(){
// check for the nefarious IE
if($.browser.msie) {
// capture the file input fields
var fileInput = $('input[type="file"]');
// add presentational <span> tags "underneath" all file input fields for styling
fileInput.after(
$(document.createElement('span')).addClass('file-underlay')
);
// bind onClick to get the file-path and update the style <div>
fileInput.click(function(){
// need to capture $(this) because setTimeout() is on the
// Window keyword 'this' changes context in it
var fileContext = $(this);
// capture the timer as well as set setTimeout()
// we use setTimeout() because IE pauses timers when a file dialog opens
// in this manner we give ourselves a "pseudo-onChange" handler
var ieBugTimeout = setTimeout(function(){
// set vars
var filePath = fileContext.val(),
fileUnderlay = fileContext.siblings('.file-underlay');
// check for IE's lovely security speil
if(filePath.match(/fakepath/)) {
// update the file-path text using case-insensitive regex
filePath = filePath.replace(/C:\\fakepath\\/i, '');
}
// update the text in the file-underlay <span>
fileUnderlay.text(filePath);
// clear the timer var
clearTimeout(ieBugTimeout);
}, 10);
});
}
});
})(jQuery);