基于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