简介

本文主要介绍使用webuploader上传文件以及兼容ie8、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

遇到的问题及解决方案

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

解决：

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

二、 如果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

三、 如果同层级还是没反应，排查问题及解决：

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

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

四、 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;
})

五、 ie8、ie9采用FLASH上传的跨域问题

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

如下图所示：

如果代码还没有打包给后台，也没有放到服务器上，可以先自己起一个node服务做代理： 在项目的根目录打开终端输入：

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

这样你就可以在ie8、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…

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