基于jQuery与Bootstrap的纯 Javascript 文件上传控件

之前在项目中写了一个附件上传系统。
已经两年多了吧,系统运行还算比较稳定。
最近决定整理一下,去掉一些复杂的功能,重构一份代码,去掉数据库部分,力争作为一个纯前端的文件上传控件,后端的代码尽量简化只写一些基础的信息
相信看看内容都能明白。

基于jQuery,这个是没的说,当然其实如果用纯粹的ES5来做也没问题,只是我比较习惯用jQuery了,然后这个插件用到了javascript file api,所以不支持 IE8,9(我在自己项目里头用的那版程序是支持IE8,9的,但是那个使用了silverlight,后台使用webservice方式上传,使用的C#进行开发,如果后台换掉的话,我不确定是否能够直接转过来)。

基于bootstrap,其实也就是简单的使用了几个样式,拆出来自己做也没问题。关于样式的话,每个人都有自己的喜好,所以样式完全可以自己修改。


写到这里忽然想吐个槽,刚刚测试了一下,IE10,11居然没有String.prototype.endsWith,所以我刚刚在代码里头加了一小段shim
然后IE10对于 XMLHttpRequest 的实现里头,缺了一个方法overrideMimeType


好了,以下是控件详细情况

  • 支持事件:

    {
      "beforeupload.fileuploader": 文件上传之前【根据返回值确定是否继续】ok
      , "fileuploadend.fileuploader": 文件上传之后【控件刷新之后】ok
      , "alluploadend.fileuploader": 所有文件上传之后【控件刷新之后】--这个涉及到计数问题--ok
      , "beforedelete.fileuploader": 文件删除之前【根据返回值确定是否继续】ok
      , "deleteend.fileuploader": 文件删除之后【控件刷新之后】ok
      , 'beforedownload.fileuploader': 文件下载之前【根据返回值确定是否继续】ok
      , 'downloadend.fileuploader': 文件下载之后【根据返回值确定是否继续】ok
      --后续
          change 发生变化,即删除之后和所有上传结束之后--ok
          beforeallupload 第一次上传之前(多选时),因为以前有过一个很诡异的要求: --ok
                          我们做的gis,有一组shp文件,在操作中是一个个体,但是作为文件系统来看,却又是一组(六个-其实只要四个就可以用)文件,所以会在上传之前校验一下文件类型,文件名,所以添加一个事件
                          原来做的时候直接把这个功能嵌入到控件里面来了,但是我想来想去都觉得不是很合理
                          这里改一下,加一个事件,用户可以直接在上传之前获取到当前上传的文件数据,以及控件中已有的所有文件数据,以此可以判断是否允许上传
                          --这个事件也就需要返回值,除非明确返回false,否则认为可以上传
    };
    
  • 配置
    {
    按钮汉字 btntext,ok
    按钮样式 btnclass,ok
    文件类型 extname,ok
    上传步长 step,ok
    上传服务路径 url, ok
    是否多选 multiple,ok

      是否允许删除 【通过beforedelete实现】,
      是否允许下载 【通过beforedownload实现】,
      上传文件最大数量,ok
      是否可用, ok
      相同文件名 samefilename 配合beforeallupload使用,此处仅强制上传的文件会使用同一个文件名(后缀名应该不同),ok
    
      单个文件大小限制:fileUploadSizeMax: 1000000, KB为单位 ok
    
    }
    
  • 方法
    {
    getoptions : 获取当前控件的配置 ok
    getcontent : 获取当前控件的内容【数组:[{FileContent}]】 ok
    getfilecount : 获取当前控件上传的文件数量 ok
    loadcontent : 加载数据 ok

      disable : 设置/获取 可用状态 ok
    
      删除所有 | 删除单个文件的功能,可以自行调用后台删除文件后,重新绑定列表即可
    }
    

  1. 控件并不以某个样式或者特点作为默认初始化(就是说不会像easyui等框架那样,直接在元素上添加一个样式,然后就可以自动初始化了),这个可以加,以后再说。

  2. 以上所有功能,加了ok的,都是已完成的,没有ok的我都提了解决方式(控件以上传为主,所以比较着重于页面展示,删除以及下载功能都相对弱化了许多)。

  3. 纯粹的javascript控件,最好不要上传超大文件(当然在单机情况下,我试过上传200M+的文件,没有出错,所以程序还可以,但是外网环境下不好说)。

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

  5. 事件触发顺序

     beforeallupload
     beforeupload
     fileuploadend fileuploaderror
     change
     alluploadend
    
     beforedelete
     deleteend
     change
    
     beforedownload
     downloadend
    
一张简单的效果示意图,主要是触发事件

最后附上地址(我的github注册了很久,但是用了没几天,暂时没琢磨明白github应该怎么用,先这样吧)

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,290评论 6 491
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,107评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,872评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,415评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,453评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,784评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,927评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,691评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,137评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,472评论 2 326
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,622评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,289评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,887评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,741评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,977评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,316评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,490评论 2 348

推荐阅读更多精彩内容