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

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