兼容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。