/ 前端基础

兼容IE8的flash上传框架"uploadify"自定义上传按钮样式的办法

(uploadify版本:3.2.1 )
因为公司业务的原因,所做的项目需要兼容IE8,因此做的上传插件无奈选择的是基于flash的uploadify。

由于是基于flash的,所以使用过程中,难以给上传按钮自定义样式,但原来的样式实在不好看,是这样的,或者和项目的UI风格不搭,于是就要想办法自定义一下,最终折腾出了一个兼容性很好的可行方案。以下为解决问题的过程记录和最终方案:

思路一(不可行):

类似于H5的自定义上传控件,将uploadify上传空间的按钮隐藏,自己做一个好看的按钮BTN,在点击这个BTN的时候,用JS控制模拟触发uploadify上传按钮的点击事件,从而完成点击上传的过程,这个想法很美好,可是在实践中发现uploadify的上传按钮是无法模拟触发点击事件的,它是一个这样的object元素,百度谷歌都查了一遍,得出的结论是如果flash插件没有提供模拟click的接口,那JS是无法模拟点击事件的,只有用户真正地去点击才行。所以,这个方法就宣布失败了。

思路二:

制作一层遮挡层,遮挡层的位置在上传按钮的上方,并设置遮挡层的pointer-eventsnone即可既满足按钮的样式效果,又能实现点击上传的功能。但是只得注意的是,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。