一个简单不报错的summernote 图片上传案例
2019/6/27 22:16:13
本文主要是介绍一个简单不报错的summernote 图片上传案例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一个比较完整的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 图片上传案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于一个简单不报错的summernote 图片上传案例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略