java 图片回显_java实现Simditor图片上传七牛云并回显
首先呢,我们有这样一个需求:
当图片上传Simditor时,将其保存到七牛云上,然后并回显在我们的Simditor中。
首先,需要我们有一个七牛云帐号,并且配置Simditor富文本编辑器。
其次,我们需要在写文章的jsp页面配置以下js
$(function() {
var editor,toolbar;
Simditor.locale = 'zh-CN';
toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'];
editor = new Simditor({
textarea: $('#editor1'),
toolbar: toolbar,
pasteImage: true,//是否允许粘帖上传图片
defaultImage: 'asset/public/js/simditor/images/image.png',
upload : {
url : 'article/qiniuUploadImg.action?Math.random()', //文件上传的接口地址
params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
fileKey: 'ImageFile', //服务器端获取文件数据的参数名
connectionCount: 3,
leaveConfirm: '正在上传文件'
}
});
});
以上主要是配置了一个图片上传到哪个接口,若我们点击了文件上传,则上传到我的qiniuUploadImg.action
这个接口上去。后面的math.random()是生成一个随机数,确保每次访问都不是同一个访问,不然的话,浏览器可能不会去执行。
然后我们配置了文件数据的参数名叫ImageFile,这个地方要和后台Controller接收到的图片的文件名称一致。
因为,我在这里配置的文件数据的参数名叫ImageFile,所以,我们需要修改Simditor文件夹下的lib下的simditor.js中的这一行代码:createInput = (function(_this) {
return function() {
if ($input) {
$input.remove();
}
return $input = $('', {
type: 'file',
name:'ImageFile',//在此处加input的name属性by诚意印象时玉龙
title: _this._t('uploadImage'),
multiple: true,
accept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg'
}).appendTo($uploadItem);
};
然后,我们看一下我的后台七牛云Controller的图片处理方法:package impressive.controller;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.List;
import java.util.UUID;
import java.util.concurrent.atomic.AtomicInteger;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import impressive.bean.Article;
import impressive.bean.ArticleCustom;
import impressive.bean.Comment;
import impressive.bean.CommentCustom;
import impressive.bean.Image;
import impressive.bean.Tags;
import impressive.bean.TagsLink;
import impressive.bean.User;
import impressive.service.ArticleService;
import impressive.service.UserService;
import impressive.utils.Time;
import net.sf.ehcache.Cache;
import net.sf.ehcache.CacheManager;
import net.sf.ehcache.Element;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.authc.ExcessiveAttemptsException;
import org.apache.shiro.subject.Subject;
import org.owasp.esapi.ESAPI;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.cache.annotation.Cacheable;
import org.springframework.cache.ehcache.EhCacheCacheManager;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.google.gson.Gson;
import com.qiniu.common.QiniuException;
import com.qiniu.common.Zone;
import com.qiniu.http.Response;
import com.qiniu.storage.Configuration;
import com.qiniu.storage.UploadManager;
import com.qiniu.storage.model.DefaultPutRet;
import com.qiniu.util.Auth;
/**
*
*
Title:ArticleController
*
Description:关于文章的Controller
*
Company:www.inx.fun
* @author 时玉龙
* @date 2018年4月28日下午11:08:54
*/
@Controller
@RequestMapping("/article")
public class ArticleController {
//注入文章service层
@Autowired
private ArticleService articleservice;
@Autowired
private UserService userservice;
//封装 七牛云里的 AK/SK 存储空间名称
private static final String AccessKey="填写你自己的密钥";
private static final String SecretKey="填写七牛云上自己的";
//外链地址
private static final String prefixname="http://";
//一开始,你填写自己的七牛云默认域名,后面别忘了加个/
//我这是已经CDN融合成功的。
private static final String spaceName="image.inx.fun/";
//存储空间名
private static final String bucket="inx-fun";
//图片上传成功后的返回信息
private String msg;
//图片水印样式
private String style="-imgchuli";
/**
*
* @Title: qiniuUploadImg
* @Description:文章图片七牛云上传
* @author 时玉龙
* @param ImageFile
* @param request
* @param response
* @return
* @throws Exception
* @return String
* @throws
*/
@RequestMapping("/qiniuUploadImg")
//RequiresPermissions("article:add")在这里进行权限的匹配验证,通过注解的方法
public @ResponseBody String qiniuceshi(MultipartFile ImageFile,HttpServletRequest request,HttpServletResponse response) throws Exception{
//生成uuid,使得图片名不重复
String keyname=UUID.randomUUID()+"impressive";
//uuid基础上加入时间戳
keyname+=System.currentTimeMillis();
//默认不指定key的情况下,以文件内容的hash值作为文件名
String key = System.currentTimeMillis()+keyname;
//根据存放的机房 选择对象 这里自动选择
Configuration cfg = new Configuration(Zone.autoZone());
UploadManager uploadManager=new UploadManager(cfg);
//用户新建
Auth auth=Auth.create(AccessKey, SecretKey);
//上传的空间
String uploadToken=auth.uploadToken(bucket);
try {
Response qiniuresponse=uploadManager.put(ImageFile.getInputStream(), key, uploadToken,null,null);
//解析上传成功的结果
DefaultPutRet putRet=new Gson().fromJson(qiniuresponse.bodyString(), DefaultPutRet.class);
//拼接七牛云链接
String qiniuUrl=spaceName+key+style;
// System.out.println("图片的地址:"+qiniuUrl);
//创建image对象
Image img =new Image();
//装填图片的七牛云url地址
img.setImage_text(qiniuUrl);
//添加文章图片到数据库
int result=articleservice.insertArticleOneImg(img);
if(result>0){//如果图片地址成功加入数据库
//将qiniuUrl返回文章页面
//装填msg信息
msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + qiniuUrl + "\"}";
}else{
System.out.println("失败!");
}
// System.out.println(putRet.key);
// System.out.println(putRet.hash);
}catch (QiniuException e) {
Response r = e.response;
System.err.println(r.toString());
try {
System.err.println(r.bodyString());
} catch (QiniuException ex2) {
}
}catch (IOException e) {
e.printStackTrace();
}
return msg;
}
}
上传七牛云参数中的MultipartFile ImageFile
一定要与之前的参数都对应起来。
七牛云密钥填写自己的密钥。
密钥位置在进了管理控制台之后,右上角个人面板-密钥管理中。
填好之后,这样就可以了,然后,我们需要对返回的msg信息做一个处理。//装填msg信息
msg = "{\"success\":\"" + true + "\",\"file_path\":\"" + qiniuUrl + "\"}";
具体处理点在simditor.js中
在这里进行处理的作用是让其上传成功后,将刚才上传的图片回显在Simditor富文本编辑器中。_this.loadImage($img, img_path, function() {
var $mask;
$img.removeData('file');
$img.removeClass('uploading').removeClass('loading');
$mask = $img.data('mask');
//在这里,将其图片的大小控制在100%以内,实现图片的自适应富文本编辑器宽度大小
$img.css("max-width","100%");
//在此处修改图片的src地址by时玉龙
$img.attr('src','http://'+img_path);
加上最下面这两句代码,就实现了图片的上传之后的回显。
我都实现https了,就是给其全部在controller与simditor.js中出现http的,加上https就是了,你能看到我这篇文章,说明刚开始捣鼓,就先用默认域名测试就行,弄好了再弄CDN融合。
欢迎入坑Simditor!
java 图片回显_java实现Simditor图片上传七牛云并回显相关推荐
- java实现excel导入导出,对象图片读取,上传七牛云
java实现excel导入导出以及解决方案 因为公司业务需求,要完成针对表格的导入导出,excel这里使用MultipartFile类接收 ,下面是部分关键代码,希望有所帮助 //获取excel文件的 ...
- uni-app 图片上传七牛云
前台uni-app+colorUi 后台jeecgboot 思路 用colorui能实现效果,但是路径还是指向本地 用七牛云,先上传到七牛云,返回路径并且指向它 后台去获取七牛token并且返回(最后 ...
- php七牛云批量上传,七牛云——批量将本地图片上传到七牛云
前言 在本地大概有10w左右的头像图片,打算批量上传到七牛云,寻找后发现了一个神奇的官方工具,十分的好用 工具 资源批量上传和多文件上传 我这里上传本地用的是QsunSync QsunSync Git ...
- 利用Python实现图片上传七牛云,从此告别繁琐
前言 欢迎大家来我的博客一起学习: http://hackergu.com 写博客的时候经常要用到七牛云存储图片,但是每次点开官网上传又显得过于麻烦,所以用python写了如下脚本用于图片上传. qi ...
- java ftp 下载慢_Java实现ftp文件上传下载解决慢中文乱码多个文件下载等问题
废话不多说了,直接给大家贴代码了,具体代码如下所示: //文件上传 public static boolean uploadToFTP(String url,int port,String usern ...
- java web文件夹_JAVA WEB项目文件夹上传下载解决方案
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...
- java ftp详解_Java实现FTP文件上传详解
import org.apache.commons.io.IOUtils; import org.apache.commons.net.ftp.FTPClient; import java.io.Fi ...
- html显示数据库图片django,django将图片上传数据库后在前端显式的方法
1.使用ImageField先安装pillow模块 pip install pillow 2.在app的models中设置 class Image(models.Model): pic_name=mo ...
- java上传文件限制大小_Java Web:附件上传,两种文件上传限制格式及大小方法,学习笔记文件操作【诗书画唱】...
附件上传: package com.jy.controller; import java.io.File; import java.io.FileOutputStream; import java.i ...
最新文章
- 百度ueditor 拖文件或world 里面复制粘贴图片到编辑中 上传到第三方问题
- linux shell脚本 报错dirname:无效选项 -- b 错误原因 解决方法
- .NET混淆器 Dotfuscator使用教程七:加强保护之改进重命名混淆
- 弱电工程网络视频监控系统联网方式及接地要求
- es6-promise源码重点分析难点解析
- 跟我一起考PMP---项目范围管理
- 分布式锁的实现与探索
- 让8只数码管从左往右显示1、2、3、4、、、8
- tomcat配置及其中部分目录作用虚拟路径虚拟主机
- 【Java从0到架构师】Spring - 事务管理
- Javascript自动登录B/S系统的简单实现
- WebStorm破解激活
- matlab igbt 关断,IGBT关断过程分析
- 织梦dedecms会员设置、互动设置教程
- 触动精灵mysql用法教程_触动精灵如何使用 触动精灵脚本编写教程攻略大全
- iphone html 手机震动,iPhone来电不会震动怎么回事?简单几招排查技巧
- 关于android 使用audiorecord 录制pcm文件 音频速度变快的问题求教
- 计算机启动蓝屏,电脑开机蓝屏详细解决方案
- SQLserver 报错RegCreateKeyEx() 返回了错误 5,“拒绝访问。” (.Net SqlClient Data Provider)错误号: 22002 严重性: 16 状态: 1
- 输入法中表情和小图标的应用