关于javascript:文件上传控件bootstrapfileinput与Python交互

留神

上面的起因，可能是和后端 API 交互不胜利的起因

• fileinput 版本不正确，须要大于 5.0
• 前端设置的 name 属性值和后端接管的属性值不统一

必要的 css 和 js 文件

请确保上面的 js 和 css 文件存在

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/css/fileinput.min.css" rel="stylesheet"
type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.1.2/js/fileinput.min.js"
type="text/javascript"></script>

bootstrap-fileinput html

你能够在 bootstrap-fileinput 插件官网，抉择其余款式

<input type="file" name="img" id="img" value=""multiple="multiple"data-show-preview="true"/>

bootstrap-fileinput js

这里是简化的配置，bootstrap-fileinput 还有更弱小的配置，能够在查看官网文档

 $("#img").fileinput({
        language: 'en',// 设置语言
        uploadUrl: "https://ky8.top/upload_images",// 图片上传的 url，我这里对应的是后盾 struts 配置好的的 action 办法
        showCaption: true,// 显示题目
        showRemove: true, // 显示移除按钮
        uploadAsync: true,// 默认异步上传
        showPreview: true,// 是否显示预览
        textEncoding: "UTF-8",// 文本编码
        browseLabel: "Select Image",
        autoReplaceBoolean: false,// 抉择图片时不清空原图片
    });


    $("#img").on('fileuploaded', function (event, data, previewId, index) {// 异步上传胜利后果解决
        {#var img = JSON.parse(data.response);// 接管后盾传过来的 json 数据 #}
        var code = data['response']['code'];
        if (code === 0) {document.getElementById('osimg').src = data['response']['result'];
            document.getElementById('oshref').href = data['response']['result'];
            document.getElementById('mk').innerText = '!['+ data['response']['name'] +'](' + data['response']['result'] + ')';
        }
    });


    $("#img").on('fileerror', function (event, data, msg) {// 异步上传失败后果解决
        alert("uploadError");
    });

胜利界面

相干源码

• 关注公众号：《Python 数据结构》，回复 008 即可

参考文档

• bootstrap-fileinput option 选项阐明