Upload a picture example with a rich text editor
- 2021-12-11 08:33:58
- OfStack
Upload pictures with rich text editor
1. js imported from kindeditor
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
2. Associate kindeditor with a text field textarea, that is, initialize an kindeditor object with textarea
itemAddEditor = TAOTAO.createEditor("#itemAddForm [name=desc]");
// Initialize category selection and picture uploader
TAOTAO.init({fun:function(node){
TAOTAO.changeItemParam(node, "itemAddForm");
}});
3. Set the parameters to upload
var TT = TAOTAO = {
// Editor parameters
kingEditorParams : {
// Specify Upload File Parameter Name
filePostName : "uploadFile",
// Object that specifies the file upload request url .
uploadJson : '/pic/upload',
// Upload type, respectively image , flash , media , file
dir : "image"
},
init : function(data){
// Initialize the picture upload component
this.initPicUpload(data);
// Initialize the Select Category component
this.initItemCat(data);
},
// Initialize the picture upload component
initPicUpload : function(data){
$(".picFileUpload").each(function(i,e){
var _ele = $(e);
_ele.siblings("div.pics").remove();
_ele.after('\
<div class="pics">\
<ul></ul>\
</div>');
// Echo picture
if(data && data.pics){
var imgs = data.pics.split(",");
for(var i in imgs){
if($.trim(imgs[i]).length > 0){
_ele.siblings(".pics").find("ul").append("<li><a href='"+imgs[i]+"' target='_blank'><img src='"+imgs[i]+"' width='80' height='50' /></a></li>");
}
}
}
// Bind the "Upload Picture Button" click Events
$(e).click(function(){
var form = $(this).parentsUntil("form").parent("form");
// Open the picture upload window
KindEditor.editor(TT.kingEditorParams).loadPlugin('multiimage',function(){
var editor = this;
editor.plugin.multiImageDialog({
clickFn : function(urlList) {
var imgArray = [];
KindEditor.each(urlList, function(i, data) {
imgArray.push(data.url);
form.find(".pics ul").append("<li><a href='"+data.url+"' target='_blank'><img src='"+data.url+"' width='80' height='50' /></a></li>");
});
form.find("[name=image]").val(imgArray.join(","));
editor.hideDialog();
}
});
});
});
});
Server-side code
public Map uploadPicture(MultipartFile uploadFile) {
Map resultMap=new HashMap<>();
try {
// Generate 1 New filenames
// De-original file name
String oldName=uploadFile.getOriginalFilename();
// Generate a new file name
//UUID.randomUUID();
String newName=IDUtils.genImageName();
newName=newName+oldName.substring(oldName.lastIndexOf("."));
String imagePath=new DateTime().toString("/yyyy/MM/dd");
// Upload pictures
boolean result=FtpUtil.uploadFile(FTP_ADDRESS,FTP_PORT, FTP_USERNAME, FTP_PASSWORD, FTP_BASE_PATH,
imagePath, newName, uploadFile.getInputStream());
System.out.println("result="+result);
if(!result){
resultMap.put("error", 1);
resultMap.put("message", " File upload failed ");
System.out.println("hh");
return resultMap;
}
resultMap.put("error", 0);
resultMap.put("url", IMAGE_BASE_PATH + imagePath + "/" + newName);
return resultMap;
} catch (IOException e) {
resultMap.put("error", 1);
resultMap.put("message", " File upload exception ");
return resultMap;
}
}
Note: The format of json string returned by the server {error: 01, messageurl}, in which error is an integer rather than a string. If it is written as a string, the picture can be uploaded to the server normally, but it cannot be echoed in the browser.
Thank you for reading, hope to help everyone, thank you for your support to this site!