将七牛js放到common下

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

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

//初始化七牛
$(function () {
qiniujs.setUp({
'domain': 'http://q1tp5a19s.bkt.clouddn.com/',
'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="https://cdn.staticfile.org/Plupload/2.1.1/moxie.js"></script>
<script src="https://cdn.staticfile.org/Plupload/2.1.1/plupload.dev.js"></script>
<script src="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系统之轮播图上传图片功能的更多相关文章

  1. 一百二十八:CMS系统之轮播图的编辑和删除功能

    编辑 form,继承添加的form 视图 @bp.route('/ubanners/', methods=['POST'])@login_required@permission_required(CM ...

  2. 一百二十六:CMS系统之轮播图管理页面布局和添加轮播图的模态对话框制作

    视图 @bp.route('/banners/')@login_required@permission_required(CMSPersmission.POSTER)def banners(): re ...

  3. 安卓开发笔记(三十二):banner轮播图的实现

    一.activity.xml 我这里主要爬取的爱奇艺首页的图片进行轮播,应用了两个github上的开源库,一个banner的库,一个加载网络图片的库,用开源库能够极大地节省我们编写代码的时间. < ...

  4. 潭州课堂25班:Ph201805201 django 项目 第四十一课 后台 轮播图管理功能讲解,文档管理功能 实现 (课堂笔记)

    在进入轮播图管理页面时,要把轮播图显示在页面上,所以后台要向前台返回: 图片路由,:image_url 优先级: priority def get(self, request): # priority ...

  5. 从零开始,搭建博客系统MVC5+EF6搭建框架(5),博客详情页、留言、轮播图管理、右侧统计博文

    一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...

  6. Flask实战第52天:cms添加轮播图前端代码逻辑完成

    首页我们在模态框中的保存按钮加一个id,这样方便我们选取这个按钮 <button type="button" class="btn btn-primary" ...

  7. 【云开发】10分钟零基础学会做一个快递查询微信小程序,快速掌握微信小程序开发技能(轮播图、API请求)

    大家好,我叫小秃僧 这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...

  8. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  9. 浅谈轮播图(原生JavaScript实现)

    现在各种轮播图插件,玲琅满目,用起来也非常方便,通常只需要选择元素然后传入参数就可以了.但是,和授人以鱼不如授人以渔一样的道理,不管怎样最基本的轮播图原理还是应当掌握的.这样不仅有利于我们自己写出来满 ...

随机推荐

  1. idou老师教你学Istio 14:如何用K8S对Istio Service进行流量健康检查

    Istio利用k8s的探针对service进行流量健康检查,有两种探针可供选择,分别是liveness和readiness: liveness探针用来侦测什么时候需要重启容器.比如说当liveness ...

  2. EF Migraiton错误解决

    System.Runtime.Serialization.SerializationException: Type is not resolved for member 'Oracle.Managed ...

  3. Python 文件操作(2)

    上一篇学习了用内置函数 open() 来打开文件,并且用 f.close() 来关闭文件. 今天来学习对这个文件对象的其他操作:读.写.找到文件当前位置-- 1.读取文件 三种方法: read([si ...

  4. Paper Reading:HyperNet

    论文:HyperNet: Towards Accurate Region Proposal Generation and Joint Object Detection 发表时间:2016 发表作者:( ...

  5. 可能是最全面的 Python 字符串拼接总结

    来源: 枫恋寒 链接: https://segmentfault.com/a/119000001.png"font-size: 12px;"> 在 Python 中字符串连接 ...

  6. 0011SpringBoot的@EnableWebMvc全面接管SpringMVC的自动配置(源码)

    所谓的@EnableWebMvc全面接管SpringMVC的自动配置,是指@EnableWebMvc注解会使SpringMVC的自动配置失效,原理如下: 1.查看@EnableWebMvc的源码,如下 ...

  7. Android笔记-Activity相关+内存泄漏+Fragment+service

    看了下,上次学习android还是17年的事情,,,,两年过去了我现在终于来搞android了... 官网有一段基础描述: https://developer.android.google.cn/gu ...

  8. python----四种内置数据结构(dict、list、tuple、set)

    1.dict 无序,可更改 2.tuple 有序,不可更改 3.list 有序,可更改(增加,删除) 4.set 无序,可能改 {元素1,元素2,元素3.....}和字典一样都是用大括号定义,不过不同 ...

  9. 配置阿里yum源

    root@docker ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/epel-7.rep ...

  10. learning express step(二)

    install express-generator C:\Users\admin\WebstormProjects\learning-express-step2>npm install expr ...