当前位置:首页 > Web开发 > 正文

一百三十一:CMS系统之轮播图上传图片功能

2024-03-31 Web开发

将七牛js放到common下

技术图片

把获取uptoken的接口放到common视图中

技术图片

把初始化七牛放到banners.js中

技术图片

//初始化七牛
$(function () {
qiniujs.setUp({
‘domain‘: ‘‘,
‘browse_btn‘: ‘upload-btn‘, //上传图片按钮的id
‘uptoken_url‘: ‘/common/uptoken/‘,
‘success‘: function (up, file, info) {
//把上传图片后的链接自动填充到输框中
var imageInput = $(‘input[name="image_url"]‘);
imageInput.val(file.name);
}
});
});

在页面中引用相关文件和标签

技术图片

<script src="http://www.mamicode.com/https:/cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
<script src="http://www.mamicode.com/https:/cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
<script src="http://www.mamicode.com/https:/cdn.staticfile.org/qiniu-js-sdk/1.0.14-beta/qiniu.js"></script>
<script src="{{ static(‘common/qiniujs.js‘) }}"></script>

给添加图片按钮加一个id,对应js里面的id

技术图片

操作

技术图片

一百三十一:CMS系统之轮播图上传图片功能

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/41962.html