简介
本文主要介绍使用webuploader上传文件以及兼容ie8、ie9所遇到的问题及解决方案。webuploader官方简介兼容ie6+。
准备工作
- 去webuploader官网下载fex.baidu.com/webuploader…或者Github下载。
- 创建一个项目，把webuploader里面的webuploader.js、webuploader.css、 webuploader.swf（最好与当前组件或*.html同层级，之后会讲原因），copy到你的项目中。
- 下载一个jQuery（兼容ie8+，最好下载2.0版本以下的,本demo使用的是1.9.1版本）。
- 全局安装http-server
如何使用
我的demo目录如下：
upload // 文件夹
webuploader.js
webuploader.css
webuploader.swf
jQuery-1.9.1.js
upload.html
- 在upload.html里引入webuploader.css、jQuery-1.9.1.js、webuploader.js（jQuery要在webuploader.js之前引入）
- 按照webuploader官方文档进行配置WebUploader.create({}),请参考官方文档;
- 在项目里打开终端，输入：http-server。
- 打开浏览器输入：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
三、 如果同层级还是没反应，排查问题及解决：
- 查看是不是问题一里面的样式问题
- 查看flash版本是否小于11.4如果小于，则升级flash，还不行继续往下看
- 右击"选择文件"按钮是否出现如下图所示
四、 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请求是否允许跨域，然后再发上传文件的请求(前端代码不需要改动).
如下图所示：
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…
作者信息：宁文飞，人和未来大数据前端工程师
