一个简单不报错的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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
Angular实现购物车计算示例代码
Feb 21 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
vue数据控制视图源码解析
Mar 28 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vue-resourc发起异步请求的方法
Feb 11 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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+Html+缓存
2006/11/25 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
PHP实现一个多功能购物网站的案例
2017/09/13 PHP
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
2013/05/07 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
2017/06/16 jQuery
Vue中计算属性computed的示例解读
2017/07/26 Javascript
webpack3之loader全解析
2017/10/26 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
Python matplotlib 画图窗口显示到gui或者控制台的实例
2018/05/24 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python实现图片添加文字
2019/11/26 Python
Python+OpenCV实现旋转文本校正方式
2020/01/09 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python中安装django模块的方法
2020/03/12 Python
python让函数不返回结果的方法
2020/06/22 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
校长四风对照检查材料
2014/09/27 职场文书
自我检讨报告
2015/01/28 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS