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


Posted in Javascript onJuly 11, 2016

一个比较完整的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 图片上传案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学JavaScript第二章
Sep 30 Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
onbeforeunload与onunload事件异同点总结
Jun 24 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
Vue2组件tree实现无限级树形菜单
Mar 29 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
Bootstrap实现弹性搜索框
Jul 11 #Javascript
Summernote实现图片上传功能的简单方法
Jul 11 #Javascript
JavaScript中setter和getter方法介绍
Jul 11 #Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 #Javascript
仿百度换肤功能的简单实例代码
Jul 11 #Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 #Javascript
全面理解闭包机制
Jul 11 #Javascript
You might like
一个目录遍历函数
2006/10/09 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
JS的反射问题
2010/04/07 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
[46:59]完美世界DOTA2联赛PWL S2 GXR vs Ink 第二场 11.19
2020/11/20 DOTA
python3图片转换二进制存入mysql
2013/12/06 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python验证企业工商注册码
2015/10/25 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
Python如何实现线程间通信
2020/07/30 Python
总经理司机岗位职责
2014/02/06 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
学校教学管理制度
2015/08/06 职场文书