一、控件下载：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 两个事件配合完成的。有知道的道友希望能告知下，万分感谢。。
写得不好请大家谅解，有错误或需要修改的地方请大家及时指出。
bootstrap fileinput控件 + django后台上传、回显简单使用
原文地址：https://www.cnblogs.com/gechenguang/p/10417439.html