bootstrap fileinput控件 + django后台上传、回显简单使用
一、控件下载:https://github.com/kartik-v/bootstrap-fileinput/
官网:http://plugins.krajee.com/file-input
需要引入的文件:1、jquery.js
2、bootstrap.js bootstrap.css
3、font-awesome.css 控件图标使用的是font-awesome,因此需要引入
4、finleinput.js fileinput.css
5、zh.js 设置中文,默认为英文
二、使用实例:
1、html: multiple设置批量上传,只需要将 class 设置为 file-loading 即可,如果设置为 class="file" 则中文无法生效,效果如下
<input id="upload-file" type="file" class="file-loading" name="attachment" multiple />
2:初始化:js代码,否则使用默认设置,详细api参考官网:http://plugins.krajee.com/file-input
var aryfiles = array(); $('#upload-file').fileinput({ language: 'zh', // 设置语言,需要引入locales/zh.js文件 uploadurl: '/att_upload/', // 上传路径 maxfilesize: 0, // 上传文件大小限制,触发 msgsizetoolarge 提示 // {name}:将被上传的文件名替换,{size}:将被上传的文件大小替换,{maxsize}:将被maxfilesize参数替换。 msgsizetoolarge: '"{name}" ({size} kb) 超过允许的最大上传大小 {maxsize} kb。请重新上传!', showpreview: true, // 展示预览 showupload: true, // 是否显示上传按钮 showcaption: true, // 是否显示文字描述 showclose: false, // 隐藏右上角× uploadasync: true, // 是否异步上传 initialpreviewshowdelete: true, // 预览中的删除按钮 autoreplace: true, // 达到最大上传数时,自动替换之前的附件 uploadextradata: function () { // uploadextradata携带附加参数,上传时携带csrftoken return {csrfmiddlewaretoken: $.cookie('csrftoken'), doc_uuid: $('[name=doc_uuid]').val()} }, initialpreview :[], // 默认预览设置,回显时会用到 initialpreviewconfig: [], // 默认预览的详细配置,回显时会用到 }).on("fileuploaded", function (e,data,previewid,index) { // 上传成功后触发的事件 }).on("fileclear", function (e) { // 移除按钮触发的事件,用该事件批量删除
$.ajax({ url: '/del_all_att/', method: 'post', datatype: 'json', data: {'aryfiles': json.stringify(aryfiles)}, success: function (data) { } }) }).on("filepredelete", function (e, key, jqxhr, data) { // 预览中删除按钮,删除上传的文件触发的事件 }).on("fileloaded", function (e, file, previewid) { // aryfile.length = 0; // 加载预览后触发的事件,将所有文件名添加到全局变量 aryfiles 数组中 aryfiles.push(file.name); })
3、django:
setting代码:
# 上传文件路径 media_url = '/upload_files/' media_root = os.path.join(base_dir, 'upload_files')
url代码:对应fileinput中的 uploadurl 参数
urlpatterns = [ path('admin/', admin.site.urls), re_path(r'att_upload/', views.attachment_upload, name='att_upload'), # 上传 re_path(r'del_doc_file/', views.del_doc_file, name='del_doc_file'), # 单个删除 re_path(r'del_all_att/', views.del_all_att, name='del_all_att'), # 批量删除 ] # 上传文件url路径 urlpatterns += static(settings.media_url, document_root=settings.media_root)
views代码:
def attachment_upload(request): att_file = request.files.get('attachment', none) doc_uuid = request.post.get('doc_uuid', none) if att_file: # 保存文件到硬盘中 file_dir = os.path.join(os.path.join(os.path.dirname(os.path.dirname(__file__)), 'upload_files'), att_file.name) f = open(file_dir, 'wb') for i in att_file.chunks(): f.write(i) f.close() # 下载和预览的url url = settings.media_url + att_file.name file_type = re.search(r'[^.]+\w$', att_file.name).group() # 提前文件后缀名
# 文件类型,可自行增删 img_list = ['jpg', 'jpeg', 'jpe', 'gif', 'png', 'pns', 'bmp', 'png', 'tif'] pdf_list = ['pdf'] text_list = ['txt', 'md', 'csv', 'nfo', 'ini', 'json', 'php', 'js', 'css'] # bootstrap fileinput 上传文件的回显参数,initialpreview(列表),initialpreviewconfig(列表) initialpreview = []
# 根据上传的文件类型,生成不同的html, if file_type in img_list: initialpreview.append("<img src='" + url + "' class='file-preview-image' style='max-width:100%;max-height:100%;'>") elif file_type in pdf_list: initialpreview.append("<div class='file-preview-frame'><div class='kv-file-content'><embed class='kv-preview-data file-preview-pdf' src='" + url + "' type='application/pdf' style='width:100%;height:160px;'></div></div>") elif file_type in text_list: initialpreview.append("<div class='file-preview-frame'><div class='kv-file-content'><textarea class='kv-preview-data file-preview-text' title='" + att_file.name + "' readonly style='width:213px;height:160px;'></textarea></div></div>") else: initialpreview.append("<div class='file-preview-other'><span class='file-other-icon'><i class='glyphicon glyphicon-file'></i></span></div>") initialpreviewconfig = [{ 'caption': att_file.name, # 文件标题 'type': file_type, # 文件类型 'downloadurl': url, # 下载地址 'url': '/del_doc_file/', # 预览中的删除按钮的url 'size': os.path.getsize(file_dir), # 文件大小 'extra': {'doc_uuid': doc_uuid}, # 删除文件携带的参数 'key': att_file.name, # 删除时ajax携带的参数 }]
# 返回json数据,initialpreview initialpreviewconfig 会替换初始化插件时的这两个参数 append:true 将内容添加到初始化预览 return httpresponse(json.dumps({'initialpreview':initialpreview, 'initialpreviewconfig':initialpreviewconfig,'append': true})) else: return httpresponse(json.dumps({'status': false}))
删除代码就不上传了,可根据自行需求去写,注意:request.post.get() 获取,attachment_upload 方法中 initialpreviewconfig 设置的 extra 和 key的值就行了。
批量删除暂时没有找到官方提供的方法,所以使用的是 fileloaded,fileclear 两个事件配合完成的。有知道的道友希望能告知下,万分感谢。。
写得不好请大家谅解,有错误或需要修改的地方请大家及时指出。
上一篇: java接口和抽象类的简单理解
下一篇: 胡大海是什么人?朱元璋为什么不喜欢他?