将七牛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. LeetCode--字符串

    1.给定字符串s,分区s使得分区的每个子字符串都是回文. 返回s的所有可能的回文分区.例如,给定s =“aab”,返回 [ ["aa","b"], [" ...

  2. PAT Advanced 1008 Elevator (20 分)

    The highest building in our city has only one elevator. A request list is made up with N positive nu ...

  3. PHP 调用 exec 执行中文命令的坑

    服务器系统Linux通过php exec 执行rar x 解压命令 保持目录结构,压缩包内英文目录正常解压中文目录解压失败,请问有什么办法可以解决直接在终端命令进行解压是没有问题的 最终解决办法 $s ...

  4. Java8-Lambda-No.05

    import java.util.HashMap; import java.util.function.BiConsumer; public class Lambda5 { //Pre-Defined ...

  5. mysql日志文件路径

    SHOW VARIABLES LIKE 'general_log_file';日志文件路径SHOW VARIABLES LIKE 'log_error';错误日志文件路径SHOW VARIABLES ...

  6. ODBC连接到400

    1.首先iSeries Client安装的时候要勾选ODBC , 这样才能找到Driver 2.某个Application是32位上,要用32位路径下的ODBC Administration打开,添加 ...

  7. ps/top

    ps -e 显示所有进程,环境变量 -f 全格式显示 -a 显示所有用户的所有进程(包括其他用户) -u 按用户名和启动时间的顺序显示进程 -x 显示无控制终端的进程 -w 显示加宽可以显示较多信息 ...

  8. [USACO5.5] 矩形周长Picture

    https://www.luogu.org/problemnew/show/P1856 1.每个矩形由两条横向边和两条纵向边组成. 2.对于横向边,按纵坐标排序.设当前讨论的边为 A [s , t] ...

  9. Poj 2976 Dropping tests(01分数规划 牛顿迭代)

    Dropping tests Time Limit: 1000MS Memory Limit: 65536K Description In a certain course, you take n t ...

  10. 第二章实战补充:Python操作Mysql

    ( 一) 导入pymysql 基础铺垫:pymysql与MySQLdb pymysql–支持py2.py3; MySQLdb–仅支持python3; django内部默认为MySQLdb,用Pytho ...