webuploader上传文件，兼容ie八、ie9

简介

本文主要介绍使用webuploader上传文件以及兼容ie八、ie9所遇到的问题及解决方案。webuploader官方简介兼容ie6+。

准备工做

1. 去webuploader官网下载fex.baidu.com/webuploader…或者Github下载。
2. 建立一个项目，把webuploader里面的webuploader.js、webuploader.css、 webuploader.swf（最好与当前组件或*.html同层级，以后会讲缘由），copy到你的项目中。
3. 下载一个jQuery（兼容ie8+，最好下载2.0版本如下的,本demo使用的是1.9.1版本）。
4. 全局安装http-server

如何使用

个人demo目录以下：

upload // 文件夹
  webuploader.js
  webuploader.css
  webuploader.swf
  jQuery-1.9.1.js
  upload.html
复制代码

1. 在upload.html里引入webuploader.css、jQuery-1.9.1.js、webuploader.js（jQuery要在webuploader.js以前引入）
2. 按照webuploader官方文档进行配置WebUploader.create({}),请参考官方文档;
3. 在项目里打开终端，输入：http-server。
4. 打开浏览器输入：http://localhost:8080/upload.html

遇到的问题及解决方案

1、 若是上传文件的框是一个弹出框，控制台也没有报错，一开始属性为{display:none},点击后为block，点击"选择文件"按钮，可是点击按钮没有响应（全部浏览器都没响应）

解决：

右击"选择文件"按钮看看input file的width、height、position。可能你会发现他们都没有正常显示。更改样式便可。

2、 若是webuploader.swf没有与upload.html同级目录，在ie9如下浏览器点击没反应

• 须要把webuploader.swf与uploader.html同层级。

例如：个人demo目录以下

upload // 文件夹
  css
    webuploader.css
  js
    webuploader.js
    webuploader.swf
    jQuery-1.9.1.js
  upload.html
复制代码

3、 若是同层级仍是没反应，排查问题及解决：

1. 查看是否是问题一里面的样式问题
2. 查看flash版本是否小于11.4若是小于，则升级flash，还不行继续往下看
3. 右击"选择文件"按钮是否出现以下图所示

若是没有箭头所指的，是由于webuploader.swf的文件路径问题，ie八、ie9 下，把webuploader.swf与upload.html放在同目录下。若是没有弹出flash的提示框的话，也没有报错的话，查看WebUploader.create({})里面的swf路径是否正确、查看页面样式是否正常。

4、 webuploader如何提交参数

官方文档中提出了在初始化中传入参数，以下：

WebUploader.create({
  // 。。。其余配置。。。
  // 。。。其余配置。。。
  formData: {
    file_uid: '',
    file_size: '0'
  }
})
复制代码

可是这个参数是固定的，页面加载、组件加载时就以经固定了，全部传入的file_uid= ''，file_size= '0', 不能在多文件上传时传入不一样参数。官方文档没有给出详细的动态传参方式。

传参方式：

uploader.on('uploadStart', function (file) {
  // 每一个文件开始上传时传入不一样参数
  uploader.options.formData.file_size = file.source.size;
  uploader.options.formData.file_uid = file.source.uid;
})
复制代码

5、 ie八、ie9采用FLASH上传的跨域问题

这一点官方文档里面没有详细介绍。从webuploader github下载的代码里找到server目录下的crossdomain.xml,这个是跨域处理的文件，把这个文件发给大家的后台，让后台把这个文件放在服务器的前端代码的根目录下面，与html同层级。ie八、ie9falsh上传文件时会先发一个get请求是否容许跨域，而后再发上传文件的请求(前端代码不须要改动).

以下图所示：

若是代码尚未打包给后台，也没有放到服务器上，能够先本身起一个node服务作代理： 在项目的根目录打开终端输入：

http-server -p 8080 -P http://****/api/v1 -c-1
// -p: 本地访问的端口号
// -P: 作转发代理的域名
// -c-1: 禁用缓存
复制代码

这样你就能够在ie八、ie9下成功上传了。

webuploader上传大文件

在ie9如下的浏览器上传超过500Mb 的文件计算md5值时就会超时，会报一个'http'的错误。官方也没有提出解决方案。

参考文献：

webuploader: https://fex.baidu.com/webuploader/doc/index.html

webuploader github: https://github.com/fex-team/webuploader/issues

原文连接：tech.gtxlab.com/webuploader…

做者信息：宁文飞，人和将来大数据前端工程师