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…

做者信息：寧文飛，人和將來大數據前端工程師