一個(gè)簡(jiǎn)單不報(bào)錯(cuò)的summernote 圖片上傳案例
一個(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)文章
微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換
本文主要介紹了微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法
這篇文章主要介紹了JS簡(jiǎn)單生成兩個(gè)數(shù)字之間隨機(jī)數(shù)的方法,涉及javascript數(shù)值運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2016-08-08script標(biāo)簽中的defer和async使用技巧說(shuō)明
這篇文章主要介紹了script標(biāo)簽中的defer和async使用技巧,包含他們的下載順序和執(zhí)行順序,以及使用場(chǎng)景需要的朋友可以參考下2023-02-02ES6 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動(dòng)態(tài)的綁定事件addEventListener方法的使用
本文為大家介紹下動(dòng)態(tài)的綁定事件的方法addEventListener的使用示例,不了解的朋友可以參考下2014-01-01