之前在項(xiàng)目中寫了一個(gè)附件上傳系統(tǒng)。
已經(jīng)兩年多了吧赁豆，系統(tǒng)運(yùn)行還算比較穩(wěn)定仅醇。
最近決定整理一下，去掉一些復(fù)雜的功能魔种，重構(gòu)一份代碼析二，去掉數(shù)據(jù)庫部分，力爭(zhēng)作為一個(gè)純前端的文件上傳控件节预，后端的代碼盡量簡(jiǎn)化只寫一些基礎(chǔ)的信息
相信看看內(nèi)容都能明白叶摄。
基于jQuery，這個(gè)是沒的說安拟，當(dāng)然其實(shí)如果用純粹的ES5來做也沒問題蛤吓，只是我比較習(xí)慣用jQuery了，然后這個(gè)插件用到了javascript file api糠赦，所以不支持 IE8会傲，9（我在自己項(xiàng)目里頭用的那版程序是支持IE8,9的，但是那個(gè)使用了silverlight愉棱，后臺(tái)使用webservice方式上傳唆铐，使用的C#進(jìn)行開發(fā)哲戚，如果后臺(tái)換掉的話奔滑，我不確定是否能夠直接轉(zhuǎn)過來）。
基于bootstrap顺少，其實(shí)也就是簡(jiǎn)單的使用了幾個(gè)樣式朋其，拆出來自己做也沒問題。關(guān)于樣式的話脆炎，每個(gè)人都有自己的喜好梅猿，所以樣式完全可以自己修改。
寫到這里忽然想吐個(gè)槽秒裕，剛剛測(cè)試了一下袱蚓，IE10，11居然沒有String.prototype.endsWith几蜻，所以我剛剛在代碼里頭加了一小段shim
然后IE10對(duì)于 XMLHttpRequest 的實(shí)現(xiàn)里頭喇潘，缺了一個(gè)方法overrideMimeType
好了体斩，以下是控件詳細(xì)情況
-
支持事件：
{ "beforeupload.fileuploader": 文件上傳之前【根據(jù)返回值確定是否繼續(xù)】ok , "fileuploadend.fileuploader": 文件上傳之后【控件刷新之后】ok , "alluploadend.fileuploader": 所有文件上傳之后【控件刷新之后】--這個(gè)涉及到計(jì)數(shù)問題--ok , "beforedelete.fileuploader": 文件刪除之前【根據(jù)返回值確定是否繼續(xù)】ok , "deleteend.fileuploader": 文件刪除之后【控件刷新之后】ok , 'beforedownload.fileuploader': 文件下載之前【根據(jù)返回值確定是否繼續(xù)】ok , 'downloadend.fileuploader': 文件下載之后【根據(jù)返回值確定是否繼續(xù)】ok --后續(xù) change 發(fā)生變化，即刪除之后和所有上傳結(jié)束之后--ok beforeallupload 第一次上傳之前（多選時(shí)）颖低，因?yàn)橐郧坝羞^一個(gè)很詭異的要求: --ok 我們做的gis絮吵，有一組shp文件，在操作中是一個(gè)個(gè)體忱屑，但是作為文件系統(tǒng)來看蹬敲，卻又是一組（六個(gè)-其實(shí)只要四個(gè)就可以用）文件，所以會(huì)在上傳之前校驗(yàn)一下文件類型莺戒，文件名伴嗡，所以添加一個(gè)事件 原來做的時(shí)候直接把這個(gè)功能嵌入到控件里面來了，但是我想來想去都覺得不是很合理 這里改一下脏毯，加一個(gè)事件闹究，用戶可以直接在上傳之前獲取到當(dāng)前上傳的文件數(shù)據(jù)，以及控件中已有的所有文件數(shù)據(jù)食店，以此可以判斷是否允許上傳 --這個(gè)事件也就需要返回值渣淤，除非明確返回false，否則認(rèn)為可以上傳 }; -
配置
{
按鈕漢字 btntext吉嫩，ok
按鈕樣式 btnclass价认，ok
文件類型 extname，ok
上傳步長(zhǎng) step自娩，ok
上傳服務(wù)路徑 url用踩， ok
是否多選 multiple，ok是否允許刪除 【通過beforedelete實(shí)現(xiàn)】忙迁， 是否允許下載 【通過beforedownload實(shí)現(xiàn)】脐彩， 上傳文件最大數(shù)量，ok 是否可用, ok 相同文件名 samefilename 配合beforeallupload使用姊扔，此處僅強(qiáng)制上傳的文件會(huì)使用同一個(gè)文件名（后綴名應(yīng)該不同）惠奸，ok 單個(gè)文件大小限制：fileUploadSizeMax: 1000000, KB為單位 ok } -
方法
{
getoptions : 獲取當(dāng)前控件的配置 ok
getcontent : 獲取當(dāng)前控件的內(nèi)容【數(shù)組：[{FileContent}]】 ok
getfilecount : 獲取當(dāng)前控件上傳的文件數(shù)量 ok
loadcontent : 加載數(shù)據(jù) okdisable : 設(shè)置/獲取 可用狀態(tài) ok 刪除所有 | 刪除單個(gè)文件的功能，可以自行調(diào)用后臺(tái)刪除文件后恰梢，重新綁定列表即可 }
控件并不以某個(gè)樣式或者特點(diǎn)作為默認(rèn)初始化（就是說不會(huì)像easyui等框架那樣佛南，直接在元素上添加一個(gè)樣式，然后就可以自動(dòng)初始化了）嵌言，這個(gè)可以加嗅回，以后再說。
以上所有功能摧茴，加了ok的绵载，都是已完成的，沒有ok的我都提了解決方式（控件以上傳為主，所以比較著重于頁面展示娃豹，刪除以及下載功能都相對(duì)弱化了許多）猜惋。
純粹的javascript控件，最好不要上傳超大文件（當(dāng)然在單機(jī)情況下培愁，我試過上傳200M+的文件著摔，沒有出錯(cuò)，所以程序還可以定续，但是外網(wǎng)環(huán)境下不好說）谍咆。
可能有些功能在上文中并沒有提到。
-
事件觸發(fā)順序
beforeallupload beforeupload fileuploadend fileuploaderror change alluploadend beforedelete deleteend change beforedownload downloadend
最后附上地址（我的github注冊(cè)了很久摹察，但是用了沒幾天，暫時(shí)沒琢磨明白github應(yīng)該怎么用倡鲸，先這樣吧）
