zoukankan      html  css  js  c++  java
  • KindEditor图片上传到七牛云

    自己做了一个网站,编辑器用的是KindEditor,平时会涉及到KindEditor自带的图片上传,但是服务器用的是虚拟主机,没多少空间,就一直想着把图片放在免费的云存储空间,之前看KindEditor的源码和七牛的SDK看得云里雾里的,网上搜索又没有类似的解决方法,只好继续看源码自己搞了,弄了整整一个晚上,基本实现了,下面说说我的做法:


    版本说明:

    KindEditor版本:4x

    七牛SDK:7.x.x

    后端脚本:PHP


    先看一下七牛给出的表单模板,在这里file和token这两个表单项是必须的


    1.修改KindEditor的plugins/image/image.js文件

    在第20行这里把上传文件的name字段改成和七牛的一致,即name="file",注释的那行是原代码


    第二处改动是本地图片上传部分,这里只做本地图片上传的修改,其他都是类似的,包括文件的上传

    将action的地址改为七牛的上传入口:http://upload.qiniu.com/,原本的处理地址是/php/upload_json.php

    添加一个隐藏的表单项:<input name="token" class="qiniu_token" value="" style="display:none;"/>

    至于file项这里看不到是因为它是另外加载的,就是hiddenElements.join('');这个,前面已经把file的name改了就好了


    到这里,我们已经把基本的表单项添加到KindEditor了,但是token现在并没有value,接下来是实现ajax向服务器获取token

    我的做法是直接在image.js这个文件的末尾写了个获取的token的函数:


    这里因为是异步的方式,我只好使用jQuery去更改上面token的value,当然,用原生js实现会更好,不用去加载jQuery,我自己用getElementById去直接设置value貌似不行,折腾了好久不知道什么原因,本来jQuery的用的是val()方法也不奏效,只好给成attr()


    上面这个是上传之后的回调函数,返回的数据是json格式,两个参数,当然后面添加处理回调的程序,回调参数个数可以自行设置

    上传成功:

    {"error":0,"url":"https://dn-lanbaidiao.qbox.me/FryyQrpKYDDZrkJGWchh9_9og6Du"}

    上传失败:

    {"error":1,"message":"xxx错误信息"}

    ps,这个函数不需要做任何修改,视个人情况而定,这里只是做一下说明


    到这里,KindEditor就修改完成了,接下来是修改七牛的php文件以及增加一个callBack.php和getToken.php


    2.后端代码的修改

    先下载七牛的SDK源码,我这里使用的是PHP的:七牛SDK(PHP版本)

    目录结构是这样


    主要修改src/Qiniu/Auth.php这个文件,并在相同目录下添加callBack.php和getToken.php,即


    #1 Auth.php


    主要是添加一个可以自己处理上传事件的回调文件,即callBack.php,这里要注意的是回调地址必须和网站地址同个域名下,不然js会报跨域错误,因为KindEditor使用的是frame来处理图片上传,这也是为什么我不直接用七牛的回调而是自己写一个,我在这里琢磨了好久才发现

    要用自己的回调的前提是要让七牛的回调地址跳转到你的回调地址,并把回调参数传给你的回调程序,所以添加一个returnUrl


    接下来先写getToken.php即生成你的七牛token,如果不知道七牛的使用原理,建议先去看一下官方文档:七牛文档


    然后是callBack.php(代替了原来kindEditor的upload_json.php的作用),自己根据情况设置参数,但要和image.js保持一致性



    最后再用kindEditor测试一下图片上传,地址已经变成了七牛云存储的地址了,大大减轻了自己服务器流量和存储空间的压力


  • 相关阅读:
    ViewState EnableViewState 禁用与使用心得
    ashx获取处理数据的简单例子
    移动标签(marquee)属性详解
    SQL Server 2008 R2 企业版/开发版/标准版(中英文下载,带序列号)
    C#,Dictionary,asp.net 字典 用法及简单操作
    .net 后台提交表单,获取返回结果
    ASP.NET : 如何将服务端的多个文件打包下载
    puppet原理及配置
    linux开机启动详细流程
    SHELL日志分析 实例一
  • 原文地址:https://www.cnblogs.com/hisheng/p/6134975.html
Copyright © 2011-2022 走看看