webuploader上传文件,兼容ie8、ie9

简介

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

准备工作

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

如何使用

我的demo目录如下:

1
2
3
4
5
6
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目录如下

1
2
3
4
5
6
7
8
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如何提交参数

官方文档中提出了在初始化中传入参数,如下:

1
2
3
4
5
6
7
8
WebUploader.create({
// 。。。其他配置。。。
// 。。。其他配置。。。
formData: {
file_uid: '',
file_size: '0'
}
})

但是这个参数是固定的,页面加载、组件加载时就以经固定了,所有传入的file_uid= ‘’,file_size= ‘0’, 不能在多文件上传时传入不同参数。官方文档没有给出详细的动态传参方式。

传参方式:

1
2
3
4
5
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服务做代理:
在项目的根目录打开终端输入:

1
2
3
4
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


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