asp.net KindEditor編輯器整合百度WebUploader插件批量上傳圖片

集成背景說明

多個圖片進行批量上傳新版本瀏覽器兼容性問題處理，原編輯器上傳圖片功能使用flash上傳插件，由於最新版本瀏覽器不再支持flash，重新集成新的上傳插件，對編輯器進行改造升級。

一、KindEditor介紹

KindEditor是一套開源的HTML可視化編輯器，主要用於讓用戶在網站上獲得所見即所得編輯效果，兼容IE、Firefox、Chrome、Safari、Opera等主流瀏覽器。使用JavaScript編寫,可以無縫的於Java、.NET、PHP、ASP等程序接合。

KindEditor非常適合在CMS、商城、論壇、博客、Wiki、電子郵件等互聯網應用上使用，2006年7月首次發佈2.0以來，KindEditor依靠出色的用戶體驗和領先的技術不斷擴大編輯器市場佔有率，目前在國內已經成爲最受歡迎的編輯器之一。

主要特點：

1. 體積小，加載速度快，但功能十分豐富。

2. 內置自定義range，完美地支持span標記。

3. 基於插件的方式設計，所有功能都是插件，增加自定義和擴展功能非常簡單。

4. 修改編輯器風格很容易，只需修改一個CSS文件。

5. 支持大部分主流瀏覽器，比如IE、Firefox、Safari、Chrome、Opera。

<script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor/themes/default/default.css"></script>

二、WebUploader介紹

官網：http://fex.baidu.com/webuploader/getting-started.html
API：http://fex.baidu.com/webuploader/doc/index.html

WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5爲主，FLASH爲輔的現代文件上傳組件。在現代的瀏覽器裏面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+

優點：
1，分片與併發結合，將一個大文件分割成多塊，併發上傳，極大地提高大文件的上傳速度。當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。
2，預覽、壓縮.支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網絡數據傳輸。
解析jpeg中的meta信息，對於各種orientation做了正確的處理，同時壓縮後上傳保留圖片的所有原始meta數據。
3，多途徑添加文件
支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊複製），Ctrl + V便可添加此圖片文件。
4，HTML5 & FLASH
兼容主流瀏覽器，接口一致，實現了兩套運行時支持，用戶無需關心內部用了什麼內核。同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求。
5，MD5秒傳當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改算法，取段md5，可大大提升驗證性能，耗時在20ms左右。
6，易擴展、可拆分採用可拆分機制, 將各個功能獨立成了小組件，可自由搭配。採用AMD規範組織代碼，清晰明瞭，方便擴展。

缺點：
1，使用0.1.5在進行flash上傳時，如果服務器端返回的不是一個json格式的字符串，webuploader.js代碼將會報錯,客戶端接收不到返回信息。

webuploader插件，避雷指南：https://www.cnblogs.com/winteronlyme/p/7008703.html

WebUploader文件上傳組件使用步驟及注意：https://www.jianshu.com/p/9f669deebf82

使用需要導入wepuploader的css文件、jquery.js以及webuploader.js文件。

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css"> 
<!--SWF在初始化的時候指定，在後面將展示-->
<script type="text/javascript" src="webuploader文件夾/webuploader.js"></script>