做网站时,如果上传的图片量很大,现在不少人会选用七牛图片服务器。那么,今天就来说说如何把网站的图片上传与七牛的sdk集成的问题。

          jsp页面,实现图片上传的方式也很多,今天就来说下百度的编辑器:ueditor

          首先要到官网去下载它,后面我也会附上源代码,需要的朋友可以下载。

          我们新建一个项目:qndemo,然后将ueditor放到webroot目录下,截图如下:

         

另外,我们还要引入jar包:

 

 前台页面,我们需要引用相关js,默认配置下,会加载出编辑效果,如下图:

       这时候,我们上传的图片会保存在本地的服务器。下面,我们开始集成七牛。

      要上传到七牛的空间,首先要有开发者账户和空间,登录到七牛官网,按提示操作,即可获取账户,空间,key和密钥信息。

      集成中会用到的界面,截图如下:

     

 

上传到七牛后,可以选择一个空间后,点开内容管理,查看上传结果:

项目中,加入七牛的sdk,简化后,如下截图:

需要修改config类的配置:

修改uptoken类配置:

下面,我们重点说下ueditor的配置:ueditor.config.js

要集成七牛上传,ueditor的jsp文件处理类要做些修改:

另外,image.html要生成token,路径:

接下来,我们就可以打开页面看看效果了:

确认后,查看html,效果如下:

点击开始上传按钮后确认,查看html,效果如下:

选择一个图片,点击确认后,查看html,效果如下:

选择一张图片后点击确认按钮,查看html,效果如下:

最后,附上一张整图,效果如下:

      源码上传到百度云网盘,感兴趣的朋友可以下载:

  地址:http://pan.baidu.com/s/1qWsfZrQ

     提取密码:9mgr

    

posted on 2014-11-02 21:05  倚窗听雨  阅读(3538)  评论(2编辑  收藏  举报