A relatively complete summernote case for uploading pictures, there is no background (there are too many cases of uploading pictures online), only front-end js. The code provided online but with bugs is fixed.
In this example, js guarantees no errors. Personal test available
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html ><html><head><script src="//code.jquery.com/jquery-1.9.1.min.js"></script><link href="//netdna.bootstrappcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" type="text/css"><script src="//netdna.bootstrappcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script><link href="//netdna.bootstrappcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css"><!-- Must--><link href="summernote-master/dist/summernote.css" rel="stylesheet" type="text/css"><!-- Must--><script src="summernote-master/dist/summernote.js"></script><!------><script src="summernote-master/lang/summernote-zh-CN.js"></script><title>bootstrap-markdown</title><style>.note-alarm {float: right;margin-top: 10px;margin-right: 10px;}</style></head><body> <div id="summernote"></div><script type="text/javascript">$(document).ready(function() { /* function sendFile(file, editor,welEditable) { console.log("file="+file); console.log("editor="+editor); console.log("welEditable="+welEditable); data = new FormData(); data.append("blog_image[image]", file); $.ajax({ url: 'blog_images.jsp', data: data, cache: false, contentType: false, processData: false, type: 'POST', success: function(data){ editor.insertImage(welEditable, data.url); } }); }*/ $('#summernote').summernote({ height: 300, /*High, Specify*/ lang: 'zh-CN', // default: 'en-US' focus:true, toolbar: [ ['style', ['bold', 'italic', 'underline', 'clear']], ['fontsize', ['fontsize']], ['color', ['color']], ['para', ['ul', 'ol', 'paragraph']], ['height', ['height']], ['insert', ['picture', 'video']] ], /* image: { selectFromFiles: 'Select File' }, */ /*onImageUpload: function(files, editor, welEditable) { sendFile(files[0], editor, welEditable); }*/ onImageUpload: function(files, editor, $editable) { sendFile(files[0], editor, $editable); } });});function sendFile(file, editor, $editable){$(".note-toolbar.btn-toolbar").append('Uploading image');var filename = false;try{filename = file['name'];alert(filename);} catch(e){filename = false;}if(!filename){$(".note-alarm").remove();}//The above prevents the prompt error caused by dragging and dropping in the editor in the picture to cause a second upload var ext = filename.substr(filename.lastIndexOf("."));ext = ext.toUpperCase();var timestamp = new Date().getTime();var name = timestamp+"_"+$("#summernote").attr('aid')+ext;//name is the file name, defined at will by myself. aid is the attribute I added to distinguish file users. data = new FormData();data.append("file", file);data.append("key",name);data.append("token",$("#summernote").attr('token'));$.ajax({data: data,type: "POST",url: "/summernote/fileupload", //The URL uploaded from the picture returns the path after the image is uploaded. http format contentType: "json",cache: false,processData: false,success: function(data) {//data is the returned value such as hash, key, and key is the defined file name alert(data);//Put the image in the edit box. editor.insertImage is a parameter, write it dead. The following http is the image resource path on the Internet. // Many online errors are this step. $('#summernote').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg");$(".note-alarm").html("Upload successfully, please wait for loading");setTimeout(function(){$(".note-alarm").remove();},3000);},error:function(){$(".note-alarm").html("Upload failed");setTimeout(function(){$(".note-alarm").remove();},3000);}});}</script></body></html>The above article is a simple summernote image upload case that does not report errors. This is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.