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

1、一个简洁不报错的summernote 图片上传案例_ 一个比较完整的summernote上传图片的案例，没有后台（上传图片网上案例太多），只有前端js.修正了网上供应的，但是有bug的代码。 这个例子，js保证不报错。亲测可用 % page language=java contentType=text/html; charset=utf-8 pageEncoding=utf-8% !DOCTYPE html html head script src=/ link href=/ rel=stylesheet type=text/css script src=/ link href=/ rel=s

2、tylesheet 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 titlebootstrap-markdown/title style .note-alarm float: right; margin

3、-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.app

4、end(blog_imageimage, 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, t

5、oolbar: 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(files0, editor,welEditable); */ onImageUpload: functi

6、on(files, editor, $editable) sendFile(files0,editor,$editable); ); ); function sendFile(file, editor, $editable) $(.note-toolbar.btn-toolbar).append(正在上传图片); var filename = false; try filename = filename; alert(filename); catch(e)filename = false; if(!filename)$(.note-alarm).remove(); /以上防止在图片在编辑器内拖

7、拽引发其次次上传导致的提示错误 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.app

8、end(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, l(上传胜利,请等待加载); setTimeout(function()$(.note-alarm).remove();,3000); , error:function() $(.note-alarm).html(上传失败)