HTML5+flash打造相容各瀏覽器的檔案上傳方案

技術mix呢發表於2017-10-19

 上一篇文章介紹了HTML5版的檔案上傳外掛,相比flash,採用HTML5的新技術無疑可以提升程式的載入速度。但是在目前的情況看來,HTML5的特性支援度不高,外掛的可用性範圍確實比較窄。例如,我在外掛中使用到的新特性有:

  1. <input type=”file` />標籤的multiple屬性
  2. File和FileList API
  3. XMLHttpRequest2的upload和onprogress
  4. FormData

  就拿File來講,IE9都不支援,所以在當前環境下IE系列瀏覽器幾乎無法使用。因此做一個相容方案還是有必要的。如何做相容呢?這不是廢話,忘了你的H5版uploadify是怎麼來的了?我們可以在不支援這些特性的瀏覽器上執行flash版的uploadify。

  鎖定目標,我們要做的其實只需三步:

  1. 寫一個介面卡,用來檢測客戶端瀏覽器對HTML5的這些特性的支援程度
  2. 如果支援,則動態載入HTML5版本的外掛所需的js和css檔案,呼叫H5版本的外掛
  3. 如果不支援,動態載入flash版本的外掛所需的js和css檔案,呼叫flash版本的外掛

  我給介面卡命名為uploadAdapter,這樣一來,我們的檔案結構應該變成了這樣:

  其中Huploadify就是我上一篇所寫的HTML5版,uploadify為官方的flash版本,原封不動放在這裡。為了動態呼叫js和css檔案,我還專門寫了一個jquery.loadscript.js,用來動態載入檔案。這樣所需的東西就全了。

使用方法

  因為改為了動態載入檔案,頁面上需引入的檔案只有下面三個:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.loadscript.js"></script>
<script type="text/javascript" src="jquery.uploadAdapter.js"></script>

  在呼叫的時候,我們直接使用uploadAdapter就可以了,其他的工作介面卡自動完成了,像這樣:

複製程式碼
$(`#upload`).uploadAdapter({
        auto:true,
        buttonText:`選擇檔案`,
        fileObjName:`file`,
        fileTypeExts:`*.jpg;*.png;*.exe`,
        multi:true,
        formData:{key:123456,key2:`vvvv`},
        fileSizeLimit:9999,
        showUploadedPercent:true,
        showUploadedSize:true,
        removeTimeout:9999999,
        uploader:`upload.php`
    });
複製程式碼

  為了避免使用在專案中的時候出現動態呼叫的路徑錯誤,在uploadAdapter中還新增了一個配置項:

baseUrl : `url/uploadAdapter` //指定uploadAdapter的根目錄

  另外,如果你想手工指定想要呼叫的外掛型別,這裡也提供了一個配置:

pluginType : `html5` //手工指定外掛型別,字串,html5或flash

截圖

  下面分別是flash版和HTML5版的截圖:

                      flash版

                     HTML5版

  樣式上有一些區別,我這裡也懶得修改了。css檔案都是獨立出來的,可以自行修改樣式。

原始碼

  原始碼我依然打為一個完整的包,包含了demo檔案。需部署在PHP環境中。

  猛戳這裡下載:http://files.cnblogs.com/lvdabao/uploadAdapter.zip

  同樣,若在使用中發現了bug或有其他建議,歡迎留言~

本文轉自呂大豹部落格園部落格,原文連結:http://www.cnblogs.com/lvdabao/p/3454551.html,如需轉載請自行聯絡原作者


相關文章