留神
上面的起因，可能是和后端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选项阐明