一个简单不报错的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 相关文章推荐
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
requireJS使用指南
Apr 27 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
JS正则子匹配实例分析
Dec 22 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
解决select2在bootstrap modal中不能正常使用的问题
Aug 09 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
js实现旋转木马轮播图效果
Jan 10 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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开发框架myqee新手快速入门教程
2014/07/14 PHP
php验证手机号码
2015/11/11 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
js利用div背景,做一个竖线的效果。
2008/11/22 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
javascript如何创建对象
2016/08/29 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
利用nvm管理多个版本的node.js与npm详解
2017/11/02 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
2018/04/04 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python 实现多维数组(array)排序
2020/02/28 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
中队活动总结
2014/08/27 职场文书
2014年教师节活动总结
2014/08/29 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书