https://github.com/kartik-v/bootstrap-fileinput
问题: jQuery版本冲突导致页面显示错乱
1.下载并把对应的js/css资源拷贝到beego项目中的static下
2.在view的tpl中添加引用
2.1 参考examples中的index,需要添加如下:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" crossorigin="anonymous">
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link href="../themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="../js/plugins/sortable.js" type="text/javascript"></script>
<script src="../js/fileinput.js" type="text/javascript"></script>
<script src="../js/locales/fr.js" type="text/javascript"></script>
<script src="../js/locales/es.js" type="text/javascript"></script>
<script src="../themes/fas/theme.js" type="text/javascript"></script>
<script src="../themes/explorer-fas/theme.js" type="text/javascript"></script>
2.2 发现会和项目中用到的jQuery冲突,遂改成如下
<link href="/static/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" crossorigin="anonymous">
<link href="/static/js/themes/explorer-fas/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/js/plugins/sortable.js" type="text/javascript"></script>
<script src="/static/js/fileinput.js" type="text/javascript"></script>
<script src="/static/js/locales/zh.js" type="text/javascript"></script>
<script src="/static/js/themes/fas/theme.js" type="text/javascript"></script>
<script src="/static/js/themes/explorer-fas/theme.js" type="text/javascript"></script>
2.3 修改文件选择样式不对,尝试各种方法不行,最后先保证文件选择样式正确,再一步步把view的代码加上,最后完美显示
1.png
3.实现上传接口
3.1 在对应的controller中添加上传router接口,只实现post方法,保证input的name值和this.GetFile("files")的key值一致
2.png
3.png
5.png
测试结果:
4.png
4.实时显示进度
暂未实现
