一个简单不报错的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 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
Web应用开发TypeScript使用详解
May 25 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
php木马webshell扫描器代码
2012/01/25 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
详解VueJs中的V-bind指令
2018/05/03 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
vue-test-utils初使用详解
2019/05/23 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
Python下singleton模式的实现方法
2014/07/16 Python
python类继承用法实例分析
2015/05/27 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
python调试神器PySnooper的使用
2019/07/03 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
详解Django admin高级用法
2019/11/06 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
英语演讲稿范文
2014/01/03 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
策划创业计划书
2014/02/06 职场文书
小学生作文评语大全
2014/04/21 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
八一建军节慰问信
2015/02/14 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
2015秋季开学典礼主持词
2015/07/16 职场文书