兼容IE8的flash上傳框架"uploadify"自定義上傳按鈕樣式的辦法

（uploadify版本：3.2.1 ）
因為公司業務的原因，所做的項目需要兼容IE8，因此做的上傳插件無奈選擇的是基於flash的uploadify。

由於是基於flash的，所以使用過程中，難以給上傳按鈕自定義樣式，但原來的樣式實在不好看，是這樣的，或者和項目的UI風格不搭，於是就要想辦法自定義一下，最終折騰出了一個兼容性很好的可行方案。以下為解決問題的過程記錄和最終方案：

思路一（不可行）：

類似於H5的自定義上傳控件，將uploadify上傳空間的按鈕隱藏，自己做一個好看的按鈕BTN，在點擊這個BTN的時候，用JS控制模擬觸發uploadify上傳按鈕的點擊事件，從而完成點擊上傳的過程，這個想法很美好，可是在實踐中發現uploadify的上傳按鈕是無法模擬觸發點擊事件的，它是一個這樣的object元素，百度谷歌都查了一遍，得出的結論是如果flash插件沒有提供模擬click的接口，那JS是無法模擬點擊事件的，只有用戶真正地去點擊才行。所以，這個方法就宣布失敗了。

思路二：

制作一層遮擋層，遮擋層的位置在上傳按鈕的上方，並設置遮擋層的pointer-events為none即可既滿足按鈕的樣式效果，又能實現點擊上傳的功能。但是只得注意的是，pointer-events是CSS3的屬性，並不兼容IE8，所以這樣看來也是不行的。但是抱着不死心的想法，我還是試了試，驚喜地發現原來uploadify實現的本身就類似於我那種思路：樣式層的按鈕和功能實現的層分離開來，功能層為那個object元素，且背景透明，z-inex為1，下方放置一個div作為按鈕的樣式控制元素。這樣的話就有辦法了，只要用一層樣式層去替換（蓋住）原來的樣式層就好了，於是根據uploadify的DOM結構，結合利用偽元素，只需要利用CSS就可以自定義uploadify的按鈕的樣式了，實現代碼如下：
DOM：

JS:

// 初始化的配置，上傳input元素的ID為ipt
$("#ipt").uploadify({
  width: 120,
  height: 30,
  buttonText: '上傳文件',
  buttonClass: 'prettyBtn', // 給默認的"button"添加className
  swf: 'uploadify/uploadify.swf',
  uploader: 'uploadify/uploadify.php'
});

CSS:

// 偽元素的內容和樣式可以根據需要自己重新定義
.uploadify {
  position: relative;
}
.uploadify-button {
  border: none;
}
.prettyBtn:after {
  content: '上傳文件';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  background-color: #fff;
  color: #000;
}

效果

結論

利用uploadify的DOM結構以及CSS偽元素，就可以自定義上傳按鈕的樣式了，詳見思路2。