不一樣瀏覽器input file樣式不同

在開發項目過程當中會碰到不一樣瀏覽器input file樣式不同。

通過分析，打算都用IE上面的附件上傳樣式，

 方案以下：

一、在IE下截個如上面的上傳按鈕，並保存。

二、判斷瀏覽器類型，若是是非IE，則將頁面上的input 設置爲近乎透明，而後將圖片放在上面。

 

不用修改原有代碼，渲染時會掃描頁面的input file 而後進行樣式覆蓋。

 

代碼以下

css：

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	width: 208px;
	position: relative;
	text-align: right;
	-moz-opacity: 0;
	filter: alpha(opacity :     0);
	opacity: 0;
	z-index: 2;
}

 js代碼：

/**
 * 附件上傳樣式自定義，解決不一樣瀏覽器附件上傳框樣式不同問題
 */
function initFileUploads() {
	if($.browser&&$.browser.msie) return;
	$("input[type=file]").each(function(){
		if($(this).parent().attr("class")!='fileinputs') return;
		$(this).attr("class","file");
		var obj=$("<div class='fakefile'><input ct='file'/><img style='padding-bottom:4px;' src='common/image/upload.png'><div>");
		$(this).after(obj);
		$(this).parent().find("input[ct=file]").width($(this).width()-65);
		$(this).on("change",function(){
			$(($(this).parent().find("input"))[1]).val($(this).val());
		})
	});
}
$(document).ready(function(){
	initFileUploads();
})