一个简单不报错的summernote 图片上传案例
一个比较完整的summernote上传图片的案例，没有后台（上传图片网上案例太多），只有前端js.修正了网上提供的，但是有bug的代码。
这个例子，js保证不报错。亲测可用
<%@pagelanguage="java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<linkhref="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"rel="stylesheet"type="text/css">
<scriptsrc="https://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<linkhref="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"rel="stylesheet"type="text/css"><!--必须-->
<linkhref="summernote-master/dist/summernote.css"rel="stylesheet"type="text/css"><!--必须-->
<scriptsrc="summernote-master/dist/summernote.js"></script><!--必须-->
<scriptsrc="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>
<divid="summernote"></div>
<scripttype="text/javascript">
$(document).ready(function(){
/*functionsendFile(file,editor,welEditable){
console.log("file="+file);
console.log("editor="+editor);
console.log("welEditable="+welEditable);
data=newFormData();
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);
}
});
});
functionsendFile(file,editor,$editable){
$(".note-toolbar.btn-toolbar").append('正在上传图片');
varfilename=false;
try{
filename=file['name'];
alert(filename);
}catch(e){filename=false;}
if(!filename){$(".note-alarm").remove();}
//以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误
varext=filename.substr(filename.lastIndexOf("."));
ext=ext.toUpperCase();
vartimestamp=newDate().getTime();
varname=timestamp+"_"+$("#summernote").attr('aid')+ext;
//name是文件名，自己随意定义，aid是我自己增加的属性用于区分文件用户
data=newFormData();
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图片上传案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。