之前在项目中写了一个附件上传系统。
已经两年多了吧,系统运行还算比较稳定。
最近决定整理一下,去掉一些复杂的功能,重构一份代码,去掉数据库部分,力争作为一个纯前端的文件上传控件,后端的代码尽量简化只写一些基础的信息
相信看看内容都能明白。
基于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 : 加载数据 okdisable : 设置/获取 可用状态 ok 删除所有 | 删除单个文件的功能,可以自行调用后台删除文件后,重新绑定列表即可 }
控件并不以某个样式或者特点作为默认初始化(就是说不会像easyui等框架那样,直接在元素上添加一个样式,然后就可以自动初始化了),这个可以加,以后再说。
以上所有功能,加了ok的,都是已完成的,没有ok的我都提了解决方式(控件以上传为主,所以比较着重于页面展示,删除以及下载功能都相对弱化了许多)。
纯粹的javascript控件,最好不要上传超大文件(当然在单机情况下,我试过上传200M+的文件,没有出错,所以程序还可以,但是外网环境下不好说)。
可能有些功能在上文中并没有提到。
-
事件触发顺序
beforeallupload beforeupload fileuploadend fileuploaderror change alluploadend beforedelete deleteend change beforedownload downloadend
最后附上地址(我的github注册了很久,但是用了没几天,暂时没琢磨明白github应该怎么用,先这样吧)