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

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

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

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

          java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

 

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

java开发:分享一下百度ueditor和七牛的图片集成上传

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

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

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

      java开发:分享一下百度ueditor和七牛的图片集成上传

 

java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

需要修改config类的配置:

java开发:分享一下百度ueditor和七牛的图片集成上传

修改uptoken类配置:

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

要集成七牛上传,ueditor的jsp文件处理类要做些修改:java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

另外,image.html要生成token,路径:java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

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

java开发:分享一下百度ueditor和七牛的图片集成上传

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

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

     提取密码:9mgr

    

相关文章: