使用summernote实现复制图片即可实现图片上传

个人资源与分享网站：http://xiaocaoshare.com/

1.页面结构

2.js

$().ready(function() {

$('.summernote').summernote({
       height : '220px',
       lang : 'zh-CN',
       callbacks: {
onImageUpload: function(files, editor, $editable) {
sendFile(files);
}
}
   });
   var content = $("#content").val();
console.log(content);
   $('#content_sn').summernote('code', content);
});

//编辑器新增的ajax上传图片函数
function sendFile(files, editor, $editable) {
var size = files[0].size;
if((size / 1024 / 1024) > 2) {
alert("图片大小不能超过2M...");
return false;
}
console.log("size="+size);
var formData = new FormData();
formData.append("file", files[0]);
$.ajax({
data : formData,
type : "POST",
url : "/file/upload", // 图片上传出来的url，返回的是图片上传后的路径，http格式
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
$('.summernote').summernote('insertImage',data.fileName);
alert("上传成功");
},
error:function(){
alert("上传失败");
}
});

@ResponseBody
@PostMapping("/upload")
public R upload(@RequestParam("file") MultipartFile file, HttpServletRequest request) {
String fileName = file.getOriginalFilename();
fileName = FileUtil.renameToUUID(fileName);
File sysFile = new File(FileType.fileType(fileName), "/files/" + fileName, new Date());
try {
FileUtil.uploadFile(file.getBytes(), saveFilePath, fileName);
} catch (Exception e) {
return R.error();
}
fileService.save(sysFile);
return R.ok().put("fileName", sysFile.getUrl());
}

使用summernote实现复制图片即可实现图片上传相关推荐

summernote富文本编辑器的自定义附件上传：不限于图片类型
summernote富文本编辑器的自定义附件上传前言一.自定义上传附件按钮和弹窗二.结合PHP上传文件进行后端处理三.用jq模拟点击添加链接方式去处理上传附件前言 summernote的上传 ...
Delphi FMX正确设计和加载图片满足分布式跨平台App的性能需求-分布式跨平台App中美工图片的处理、上传下载、并发及客户端显示技术架构
Delphi FMX正确设计和加载图片满足分布式跨平台App的性能需求分布式跨平台App中美工图片的处理.上传下载.并发及客户端显示技术架构 [综合:客户端(内存耗用.设备屏幕的自动适配).服务端( ...
H5图片预览及上传（WEB前端）
H5图片预览及上传 web上传图片很简单,网上有许多的demo和js,但是本人嫌弃用那些会引入许多js包,所以还是用原生的jquery来写吧. 一.html布局文件 html有一个自己的上传文件控件- ...
CSDN 转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传（已有图床）
前言注意:本篇并非创建图床的问题本人使用的图床是阿里云的最近将本地的markdown文档上传到CSDN,所有的图片都会提示:源站可能有防盗链机制,建议将图片保存下来直接上传但是直接把图片链接粘 ...
图片和视频的上传（文件上传通用）
流程如下: 1.先引入el-upload 2.调用上传前事件 3.上传前事件中将file文件转formData 4.调用后端oss接口上传文件 5.上传完成后回显数据 6.点击图片/视频预览图片和视 ...
图片、音视频消息上传优化
图片.音视频消息上传优化通常图片.音视频等多媒体消息相对于文本消息会大很多,因此,多媒体消息在网络传输.实时触达等方面相需要有更多的优化.本文就针对如何使图片.视频.语音等多媒体消息发送得又快又稳进 ...
axios获取图片显示_Vue.js+axios图片预览以及上传显示进度
在平时项目开发中,我们经常会对文件做一些上传操作,不仅仅要实现基本需求,也要兼顾用户体验,根据自己在工作中遇到的问题谈谈对图片上传的预览以及上传进度的优化. 1.搭建项目基于Vue.js+axios ...
解决：百度编辑器UEditor，怎么将图片保存到图片服务器，或者上传到ftp服务器的问题（如果你正在用UE，这篇文章值得你看下）
解决:百度编辑器UEditor,怎么将图片保存到图片服务器,或者上传到ftp服务器的问题(如果你正在用UE,这篇文章值得你看下) 参考文章: (1)解决:百度编辑器UEditor,怎么将图片保存到图片 ...
【Android实战】----基于Retrofit实现多图片/文件、图文上传
本文代码详见:https://github.com/honghailiang/RetrofitUpLoadImage 一.再次膜拜下Retrofit Retrofit无论从性能还是使用方便性上都很屌! ...
图片文件压缩并上传至阿里云OSS
图片处理 Thumbnails 在进行Java开发时可以使用Thumbnails工具类对图片进行处理,旋转.裁剪.格式转换.加水印等. 使用步骤导包 <dependency><gr ...

使用summernote实现复制图片即可实现图片上传

使用summernote实现复制图片即可实现图片上传相关推荐

最新文章

热门文章