之前在項(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)該怎么用倡鲸,先這樣吧)