一个简单不报错的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 相关文章推荐
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
May 17 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
解析Vue.js中的组件
Feb 02 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 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合并两个数组的两种方式的异同
2012/09/14 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
js DOM的学习笔记
2011/12/22 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
2015/11/04 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
Python IDLE入门简介
2017/12/08 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
python的依赖管理的实现
2019/05/14 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python 画图 图例自由定义方式
2020/04/17 Python
python代码区分大小写吗
2020/06/17 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
华为的Java面试题
2014/03/07 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
实习单位证明范例
2014/11/17 职场文书
社会实践活动总结格式
2015/05/11 职场文书
国情备忘录观后感
2015/06/04 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
MySQL笔记 —SQL运算符
2022/01/18 MySQL