bootstrap file input java_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" 则中文无法生效，效果如下

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代码：

defattachment_upload(request):

att_file= request.FILES.get('attachment', None)

doc_uuid= request.POST.get('doc_uuid', None)ifatt_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 inatt_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 inimg_list:

initialPreview.append("")elif file_type inpdf_list:

initialPreview.append("

initialPreview.append("

initialPreview.append("

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 两个事件配合完成的。有知道的道友希望能告知下，万分感谢。。

写得不好请大家谅解，有错误或需要修改的地方请大家及时指出。