基于jQuery与Bootstrap的纯 Javascript

2017-02-28 本文已影响171人为什么一定要起昵称

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

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

  删除所有 | 删除单个文件的功能，可以自行调用后台删除文件后，重新绑定列表即可
}
```

控件并不以某个样式或者特点作为默认初始化（就是说不会像easyui等框架那样，直接在元素上添加一个样式，然后就可以自动初始化了），这个可以加，以后再说。
以上所有功能，加了ok的，都是已完成的，没有ok的我都提了解决方式（控件以上传为主，所以比较着重于页面展示，删除以及下载功能都相对弱化了许多）。
纯粹的javascript控件，最好不要上传超大文件（当然在单机情况下，我试过上传200M+的文件，没有出错，所以程序还可以，但是外网环境下不好说）。
可能有些功能在上文中并没有提到。

事件触发顺序

 beforeallupload
 beforeupload
 fileuploadend fileuploaderror
 change
 alluploadend

 beforedelete
 deleteend
 change

 beforedownload
 downloadend

一张简单的效果示意图，主要是触发事件

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

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

基于jQuery与Bootstrap的纯 Javascript

猜你喜欢

热点阅读