bootstrap fileinput控件 + django後臺上傳、回顯簡單使用

1、控件下載：https://github.com/kartik-v/bootstrap-fileinput/php

　　官網：http://plugins.krajee.com/file-inputcss

　　須要引入的文件：一、jquery.jshtml

　　　　　　　　　　二、bootstrap.js　　bootstrap.cssjquery

　　　　　　　　　　三、font-awesome.css　　控件圖標使用的是font-awesome，所以須要引入git

　　　　　　　　　　四、finleinput.js　　fileinput.cssgithub

　　　　　　　　　　五、zh.js　　設置中文，默認爲英文ajax

2、使用實例：django

　　一、HTML： multiple設置批量上傳，只須要將 class 設置爲 file-loading 便可，若是設置爲 class="file" 則中文沒法生效，效果以下json

<input id="upload-file" type="file" class="file-loading" name="attachment" multiple />

　　2：初始化：js代碼，不然使用默認設置，詳細api參考官網：http://plugins.krajee.com/file-inputbootstrap

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); })

　　三、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 兩個事件配合完成的。有知道的道友但願能告知下，萬分感謝。。

　　寫得很差請你們諒解，有錯誤或須要修改的地方請你們及時指出。

原文出處：https://www.cnblogs.com/gechenguang/p/10417439.html