做网站时,如果上传的图片量很大,现在不少人会选用七牛图片服务器。那么,今天就来说说如何把网站的图片上传与七牛的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