一个简单不报错的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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
学习ExtJS border布局
Oct 08 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
javascript使用appendChild追加节点实例
Jan 12 Javascript
一篇文章掌握RequireJS常用知识
Jan 26 Javascript
JS访问DOM节点方法详解
Nov 29 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
详解使用React进行组件库开发
Feb 06 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
javascript中Function类型详解
2015/04/28 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
再谈JavaScript线程
2015/07/10 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
2019/09/24 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
Python eval函数介绍及用法
2020/11/09 Python
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
亚洲最大的运动鞋寄售店:KicksCrew
2020/11/26 全球购物
教师绩效考核方案
2014/01/21 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
Java 死锁解决方案
2022/05/11 Java/Android