一个简单不报错的summernote 图片上传案例

2019-11-20 09:30:49

字体：大中小

来源：转载

供稿：网友

一个比较完整的summernote上传图片的案例，没有后台（上传图片网上案例太多），只有前端js.修正了网上提供的，但是有bug的代码。

这个例子，js保证不报错。亲测可用

<%@ 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"><!--必须--><link href="summernote-master/dist/summernote.css" rel="stylesheet" type="text/css"><!--必须--><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, /*高さを指定*/  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: '选择文件'        }, */  /*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('正在上传图片');var filename = false;try{filename = file['name'];alert(filename);} catch(e){filename = false;}if(!filename){$(".note-alarm").remove();}//以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误var ext = filename.substr(filename.lastIndexOf("."));ext = ext.toUpperCase();var timestamp = new Date().getTime();var name = timestamp+"_"+$("#summernote").attr('aid')+ext;//name是文件名，自己随意定义，aid是我自己增加的属性用于区分文件用户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", //图片上传出来的url，返回的是图片上传后的路径，http格式contentType: "json",cache: false,processData: false,success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名alert(data);//把图片放到编辑框中。editor.insertImage 是参数，写死。后面的http是网上的图片资源路径。//网上很多就是这一步出错。$('#summernote').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg");$(".note-alarm").html("上传成功,请等待加载");setTimeout(function(){$(".note-alarm").remove();},3000);},error:function(){$(".note-alarm").html("上传失败");setTimeout(function(){$(".note-alarm").remove();},3000);}});}</script></body></html>

以上这篇一个简单不报错的summernote 图片上传案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：jQuery实现table中的tr上下移动并保持序号不变的实例代码

下一篇：Bootstrap实现弹性搜索框