欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote 圖片上傳案例

 更新時(shí)間:2016年07月11日 10:08:41   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote圖片上傳案例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一個(gè)比較完整的summernote上傳圖片的案例,沒(méi)有后臺(tái)(上傳圖片網(wǎng)上案例太多),只有前端js.修正了網(wǎng)上提供的,但是有bug的代碼。

這個(gè)例子,js保證不報(bào)錯(cuò)。親測(cè)可用

<%@ page language="java" contentType="text/html; charset=utf-8"
  pageEncoding="utf-8"%>
<!DOCTYPE html >
<html>
<head>


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<link  rel="stylesheet" type="text/css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<link  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();}
//以上防止在圖片在編輯器內(nèi)拖拽引發(fā)第二次上傳導(dǎo)致的提示錯(cuò)誤
var ext = filename.substr(filename.lastIndexOf("."));
ext = ext.toUpperCase();
var timestamp = new Date().getTime();
var name = timestamp+"_"+$("#summernote").attr('aid')+ext;
//name是文件名,自己隨意定義,aid是我自己增加的屬性用于區(qū)分文件用戶
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", //圖片上傳出來(lái)的url,返回的是圖片上傳后的路徑,http格式
contentType: "json",
cache: false,
processData: false,
success: function(data) {
//data是返回的hash,key之類的值,key是定義的文件名
alert(data);
//把圖片放到編輯框中。editor.insertImage 是參數(shù),寫死。后面的http是網(wǎng)上的圖片資源路徑。
//網(wǎng)上很多就是這一步出錯(cuò)。
$('#summernote').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg");

$(".note-alarm").html("上傳成功,請(qǐng)等待加載");
setTimeout(function(){$(".note-alarm").remove();},3000);
},
error:function(){
$(".note-alarm").html("上傳失敗");
setTimeout(function(){$(".note-alarm").remove();},3000);
}
});
}

</script>
</body>
</html>

以上這篇一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote 圖片上傳案例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • JS繼承用法實(shí)例分析

    JS繼承用法實(shí)例分析

    這篇文章主要介紹了JS繼承用法,實(shí)例分析了拷貝繼承、類繼承及原型繼承等的使用技巧,需要的朋友可以參考下
    2015-02-02
  • fastadmin中調(diào)用js的方法

    fastadmin中調(diào)用js的方法

    這篇文章主要介紹了fastadmin中調(diào)用js的方法,在文中給大家補(bǔ)充介紹了Fastadmin里面的js運(yùn)行原理,需要的朋友可以參考下
    2019-05-05
  • 一篇文章讓你輕松記住js的隱式轉(zhuǎn)化

    一篇文章讓你輕松記住js的隱式轉(zhuǎn)化

    這篇文章主要給大家介紹了如何通過(guò)一篇文章讓你輕松記住js的隱式轉(zhuǎn)化的相關(guān)資料,通過(guò)在各種情況下發(fā)生的隱式類型的例子,來(lái)詳細(xì)的了解隱式類型轉(zhuǎn)換的過(guò)程,需要的朋友可以參考下
    2022-01-01
  • 微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換

    微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換

    本文主要介紹了微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法

    JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法

    這篇文章主要介紹了JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法,涉及javascript數(shù)值運(yùn)算的相關(guān)技巧,需要的朋友可以參考下
    2016-08-08
  • script標(biāo)簽中的defer和async使用技巧說(shuō)明

    script標(biāo)簽中的defer和async使用技巧說(shuō)明

    這篇文章主要介紹了script標(biāo)簽中的defer和async使用技巧,包含他們的下載順序和執(zhí)行順序,以及使用場(chǎng)景需要的朋友可以參考下
    2023-02-02
  • ES6 fetch函數(shù)與后臺(tái)交互實(shí)現(xiàn)

    ES6 fetch函數(shù)與后臺(tái)交互實(shí)現(xiàn)

    最近在學(xué)習(xí)react-native,遇到調(diào)用后端接口的問(wèn)題??戳丝垂俜轿臋n,推薦使用es6的fetch來(lái)與后端進(jìn)行交互,這篇文章主要介紹了ES6 fetch函數(shù)與后臺(tái)交互實(shí)現(xiàn),感興趣的小伙伴們可以參考一下
    2018-11-11
  • js中復(fù)選框的取值及賦值示例詳解

    js中復(fù)選框的取值及賦值示例詳解

    這篇文章主要給大家介紹了關(guān)于js中復(fù)選框的取值及賦值的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10
  • 微信小程序?qū)悠吲T拼鎯?chǔ)的方法

    微信小程序?qū)悠吲T拼鎯?chǔ)的方法

    本篇文章主要介紹了小程序?qū)悠吲T拼鎯?chǔ)的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07
  • 動(dòng)態(tài)的綁定事件addEventListener方法的使用

    動(dòng)態(tài)的綁定事件addEventListener方法的使用

    本文為大家介紹下動(dòng)態(tài)的綁定事件的方法addEventListener的使用示例,不了解的朋友可以參考下
    2014-01-01

最新評(píng)論