Of Stack

A Simple summernote Picture Upload Case without Reporting Errors

  • 2021-07-02 23:29:09
  • OfStack

A relatively complete summernote upload pictures of the case, no background (upload pictures online cases too many), only the front js. Corrected online provided, but there is bug code.

In this example, js guarantees no error. Pro-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.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.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><!-- Must -->
<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, /* Gao San designation */
  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 a 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 pictures ');
var filename = false;
try{
filename = file['name'];
alert(filename);
} catch(e){filename = false;}
if(!filename){$(".note-alarm").remove();}
// The above prevents dragging and dropping pictures in the editor from triggering the 2 Prompt error caused by secondary upload 
var ext = filename.substr(filename.lastIndexOf("."));
ext = ext.toUpperCase();
var timestamp = new Date().getTime();
var name = timestamp+"_"+$("#summernote").attr('aid')+ext;
//name Is a file name, which you can define at will. aid It is an attribute I added myself 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", // From the picture url Returns the path of the picture after uploading, http Format 
contentType: "json",
cache: false,
processData: false,
success: function(data) {
//data Is returned hash,key Values such as, key Is the filename of the definition 
alert(data);
// Put the picture in the edit box. editor.insertImage  Is a parameter, write to death. Back http It is the path of picture resources on the Internet. 
// This is a lot on the Internet 1 Step error. 
$('#summernote').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg");

$(".note-alarm").html(" Upload succeeded , 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>
Related articles: