一、需求
在网络运维平台的设计中用户可能会产生不少的文档,这就需啊哟来做一个对文档管理的功能。
主要实现的目标有:单个文档上传,批量上传;单个文档下载,批量下载;限制上传文档的大小,限制同时上传文档的数量。
二、选择文档保存方式
文档上传的时候有几种方式,分别是:
1.直接把文档保存到数据库中(这个最简单粗暴,对数据库的压力也是最大的一个,也最容易带来更多的问题所以不选择这种做法)
2.通过nginx或者Apache搭建文件服务器,由django进行权限判断,文档上传下载的部分交由nginx来处理(据说这个是最好的方案),但是由于本人对nginx并不熟悉,加之后期部署方面的原因,并没有选择这种方法。
3.文档通过django自带的机制上传到指定为文件夹,文件名路径等一些基本信息保存到数据库中,通过查询数据库中的信息来找到文件的存放位置进而对文档进行操作。(本文采用的就是这种方式)
三、数据库设计
数据库采用postgresql建了3张表分别存储左侧ztree文件夹树、右侧datatable、限制文件大小上传个数
ft_directory(左侧文件夹树):主要包含:名称、别名、描述、uuid、父节点、层级等字段
ft_attach(保存文件信息的字段):文件名、关键字、描述、下载次数、上传者(预留字段现在并没有用)、文件大小、文件路径等字段
ft_directory_setting:这个表比较简单仅包含配置关键字、配置数值、描述这三个主要字段
注:每个表都需要有的创建时间更新时间等字段在这里不再列出
四、jQuery-file-upload
为了使文档上传的时候实现多文件同时上传,并提高上传效果,采用jQuery-file-upload插件在前端实现对文件的处理。
jQuery-file-upload的基本用法:
初始化jQuery-file-upload
$('#fileupload').fileupload();
一些基本配置
url: '/feature/attach/dt/create/fild/',
singleFileUploads: false, //一次上传多个文件
autoUpload: false,
maxFileSize: parseInt($('#file_size').val()) * 1024 * 1024,
maxNumberOfFiles: parseInt($('#file_count_size').val()),
messages: {
maxFileSize: '超过允许的最大值!',
maxNumberOfFiles: '上传的文件数量超过允许的最大值!'
},
jQuery提供了不少的事件,我们仅仅需要使用他提供的一部分就好了
processdail:该事件提供了当文件上传时出现错误的时候执行的一些方法。在本例中是当文档大小或者同时上传的文档数不满足条件的时候执行
应当注意的是如果选中多个文件,这个方法将要执行多次,选中几个文档执行几次。
processfail: function (e, data) {
//单个文件上传失败
if (self.datafile == undefined) {
self.datafile = data
}
var currentFile = data.files[data.index];
if (data.files.error && currentFile.error) {
if (currentFile.error == '上传的文件数量超过允许的最大值!') {
$('#warning_file').css('display', 'block').html('').prepend(currentFile.error + '<br>')
} else {
$('#warning_file').css('display', 'block').prepend(currentFile.name + ' ' + currentFile.error + '<br>')
}
}
},
processdone:该事件是在单个文件处理圆满结束的时候执行,在这个方法之后dada参数将加上submit()方法可通过 data.submit()的方式直接把文件提交到服务器,同时如果选中有多个file则执行多次,我们可以把这个值赋到 self.datafile上然后在用户点击提交按钮的时候执行 self.datafile.submit()把files和整个表单提交到后台。
progressall:该事件是上传进度事件通过该事件可设置上传进度条
change:事件当选中的file发生改变的时候执行
例:
.bind('fileuploadchange', function (e, data) {
$('#warning_file').css('display', 'none').html('');
$('#progresss').css('width', '0%');
self.init_file_list(data);
});
当选中的file改变的时候进度条置零,清空警告框内容调用函数处理下一步操作
五、设计思路
当用户点击提交按钮的时候,执行 data.submit()通过jQuery-file-upload的机制把整个form表单提交到后台,表单中也可以包含我们添加的一些数据。
一开始的时候只需要在processdone:事件执行的时候,把data放到一个用户点击提交时能够访问到的地方,self.datafile是一个不错的选择。
1.初始化self.datafile
当用户选择文件又没有错误的时候 以下函数将会执行。
processdone可以执行很多次,但是我们只在self.datafile为undefined的时候执行一次,这样既能保证self.datafile可以使用self.datafile.submit()又不影响后续操作。