WebUploader 的一些坑

[cobish]

上传文件

由于需要有上传文件功能，于是想用到 ajax + formdata 来实现。现代浏览器用 formdata 来实现已经很简单了。

无奈又需要兼容 IE9，于是又想到了以前实现过的 form + iframe 来实现。但想了一下，涉及到写 form，除了上传文件，还要传参数。涉及到跨域。涉及到服务端返回数据不能是 JSON 格式。写起来真的很麻烦。

于是打算先直接使用 WebUploader 吧。

HTML5 上传

使用 WebUploader 的 HTML5 上传，估计就是使用了 formdata 来实现的，这里没什么问题。不过 WebUploader 默认会带上一些参数，比如 type 表示文件类型，name 表示文件名称。

这时，如果跟后端定义的参数与这些重合，就很尴尬了，定义的参数会被覆盖。或者 input file 默认的 name 是 file，后端设置获取的参数又不是 file，就得修改配置参数了。

这些参数之类的都需要注意，与后端协调好。

Flash 上传

这个遇到的问题真花了我不少时间，而且是无用功的时间。

在 chrome 下设置 runtimeOrder 为 flash，脚本直接报错。

我的 IE 选择元素有点问题，于是用 360 浏览器的兼容模式测，总之就是定义了以下参数，但按钮死活点击不了。

this.uploader = WebUploader.create({
  // ...
  accept: {
    extensions: 'txt'
  },
  runtimeOrder: 'flash', // 为了急速模式也方便测 flash
});

谷歌了很久，查 issue 也花了不少时间，用了以上几种方法都未果。

换 p 标签

有人说把按钮的标签换成 p 标签，没卵用。

加 meta

加以下 meta 的：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

也没卵用。

调用 refresh

调用 uploader.refresh 方法的，更没卵用。

引用跟官网一样的静态资源

刚开始以为是 swf 文件损坏的，然后引用官网的，CDN 的，还是不行。

后面发现官网的 DEMO 在 IE9 模式运行得了，但下载后的 DEMO 依然按钮点击不了。

后面索性把官网 DEMO 的所有静态资源都引入到自己的项目下（除了 demo.js 文件，这个是关键）。依然不行。

最后

就在山穷水尽疑无路的时间，上帝给了我光明。

查看了官网DEMO 的时候，我发现了这个，并尝试了一下：

WebUploader.create({
  // ...
  accept: {
    title: 'text',
    extensions: 'txt',
    mimeTypes: 'text/plain'
  }
});

可！以！了！ 我勒了个去！

accept 竟然要写全才行。套路套路。

crossdomain.xml

根目录下要有 crossdomain.xml 才支持 flash 的上传。