基于jQuery與Bootstrap的純 Javascript 文件上傳控件

之前在項(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ù) ok

      disable : 設(shè)置/獲取 可用狀態(tài) ok
    
      刪除所有 | 刪除單個(gè)文件的功能,可以自行調(diào)用后臺(tái)刪除文件后恰梢,重新綁定列表即可
    }
    

  1. 控件并不以某個(gè)樣式或者特點(diǎn)作為默認(rèn)初始化(就是說不會(huì)像easyui等框架那樣佛南,直接在元素上添加一個(gè)樣式,然后就可以自動(dòng)初始化了)嵌言,這個(gè)可以加嗅回,以后再說。

  2. 以上所有功能摧茴,加了ok的绵载,都是已完成的,沒有ok的我都提了解決方式(控件以上傳為主,所以比較著重于頁面展示娃豹,刪除以及下載功能都相對(duì)弱化了許多)猜惋。

  3. 純粹的javascript控件,最好不要上傳超大文件(當(dāng)然在單機(jī)情況下培愁,我試過上傳200M+的文件著摔,沒有出錯(cuò),所以程序還可以定续,但是外網(wǎng)環(huán)境下不好說)谍咆。

  4. 可能有些功能在上文中并沒有提到。

  5. 事件觸發(fā)順序

     beforeallupload
     beforeupload
     fileuploadend fileuploaderror
     change
     alluploadend
    
     beforedelete
     deleteend
     change
    
     beforedownload
     downloadend
    
一張簡(jiǎn)單的效果示意圖私股,主要是觸發(fā)事件

最后附上地址(我的github注冊(cè)了很久摹察,但是用了沒幾天,暫時(shí)沒琢磨明白github應(yīng)該怎么用倡鲸,先這樣吧)

https://github.com/liq-personal-2017/jquery.fileuploader

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末供嚎,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子峭状,更是在濱河造成了極大的恐慌克滴,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件优床,死亡現(xiàn)場(chǎng)離奇詭異劝赔,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)胆敞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門着帽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人移层,你說我怎么就攤上這事仍翰。” “怎么了观话?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵予借,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我匪燕,道長(zhǎng)蕾羊,這世上最難降的妖魔是什么喧笔? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任帽驯,我火速辦了婚禮,結(jié)果婚禮上书闸,老公的妹妹穿的比我還像新娘尼变。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布嫌术。 她就那樣靜靜地躺著哀澈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪度气。 梳的紋絲不亂的頭發(fā)上割按,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音磷籍,去河邊找鬼适荣。 笑死,一個(gè)胖子當(dāng)著我的面吹牛院领,可吹牛的內(nèi)容都是我干的弛矛。 我是一名探鬼主播,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼比然,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼丈氓!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起强法,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤万俗,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后饮怯,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體该编,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年硕淑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了课竣。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡置媳,死狀恐怖于樟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情拇囊,我是刑警寧澤迂曲,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站寥袭,受9級(jí)特大地震影響路捧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜传黄,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一杰扫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧膘掰,春花似錦章姓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽零渐。三九已至,卻和暖如春系忙,著一層夾襖步出監(jiān)牢的瞬間诵盼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工银还, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拦耐,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓见剩,卻偏偏與公主長(zhǎng)得像杀糯,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子苍苞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容