一个简单不报错的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 24 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
Aug 02 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
解决 window.onload 被覆盖的问题方法
Jan 14 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+xslt在windows平台上
2006/10/09 PHP
php date()日期时间函数详解
2010/05/16 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
分享50个提高PHP执行效率的技巧
2015/12/26 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
PHP asXML()函数讲解
2019/02/03 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
javascript iframe中打开文件,并检测iframe存在否
2008/12/28 Javascript
javascript Object与Function使用
2010/01/11 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Python_查看sqlite3表结构,查询语句的示例代码
2019/07/17 Python
python实现静态服务器
2019/09/05 Python
教师年终个人自我评价
2013/10/04 职场文书
安全生产检讨书
2014/01/21 职场文书
运动会稿件100字
2014/02/21 职场文书
聘任书模板
2014/03/29 职场文书
大一新生检讨书
2014/10/29 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
公司保洁员管理制度
2015/08/04 职场文书
详解nginx location指令
2022/01/18 Servers