一個不報錯的summernote 上傳圖片案例

阿新 • • 發佈：2019-01-13

一個比較完整的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 上傳圖片案例

一個比較完整的summernote上傳圖片的案例，沒有後臺（上傳圖片網上案例太多），只有前端js.修正了網上提供的，但是有bug的程式碼。這個例子，js保證不報錯。親測可用 <%@ page language="java" contentType="text/ht

python程式碼本地執行不報錯，上傳伺服器後報錯？？？

本地執行是成功的，程式碼也更新了，但在伺服器上執行程式碼就報錯了，500 Internal Server ErrorThe server encountered an internal error and was unable to complete your request. Either t

summernote上傳圖片保存路徑（C#）

logs new 如果 com 失敗 ase sdn form || 1.寫一個div，ID為Content 1 <div id="Content" class="summernoteContent"> 2 3 </div> 2.讓其成為富文本

php實現等比例不失真縮放上傳圖片的方法

jpeg || 占用空間 pos width 參考 idt brush 上傳圖片本文實例分析了php實現等比例不失真縮放上傳圖片的方法。分享給大家供大家參考，具體如下：有時上傳圖片時因為圖片太大了，不僅占用空間，消耗流量，而且影響瀏（圖片的尺寸大小不一）。下面分享一種等

Django Rest Framework 使用summernote上傳圖片

ssi har 分享圖片超過 django 路徑類型 reverse all summernote：鏈接：https://summernote.org/deep-dive/ 基於Bootstrap輕量級富文本框，支持直接粘貼圖片，開發文檔也比較全。基本使用請自

php實現等比例不失真縮放上傳圖片

有時上傳圖片時因為圖片太大了，不僅佔用空間，消耗流量，而且影響瀏（圖片的尺寸大小不一）。下面分享一種等比例不失真縮放圖片的方法，這樣，不管上傳的圖片尺有多大，都會自動壓縮到我們設定尺寸值的範圍之內。經過

asp.net 使用ckfinder 不彈窗直接上傳圖片、檔案。

步驟一：複製QuickUploadCommandHandler.cs，比如複製出重新命名為LwjUploadCommandHandler.cs 修改類名，以及構造。將GetJavaScriptCode修改成下面程式碼： protected override string

關於ueditor編輯器外掛的使用記錄 --- 解決"後端配置項沒有正常載入，上傳外掛不能正常使用"上傳圖片處的問題

Ueditor解壓後的檔案應當直接放在www根目錄下,且檔名更改為ueditor 後開啟遊覽器訪問: http://localhost/ueditor/demo.html (先確保demo.htm

關於CKEditor4 5 6的使用，自定義toolbar配置，上傳圖片案例（SpringMVC+MyBatis案例），

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

【Java筆記】TCP上傳圖片案例分析

要求：從客戶端上傳一張圖片到伺服器，伺服器將圖片儲存在指定資料夾中，伺服器反饋上傳成功。（本質是檔案複製，只要有資料來源和資料目的即可）客戶端：資料來源是電腦某碟符下的某張照片資料目的

TP5 webuploader 單頁面多實例上傳圖片案例

ads ttr 代碼 trap utf-8 出錯 cep margin gin 在使用webuploader上傳文件過程中，如果同一個頁面存在多個上傳區域，可以參考本示例代碼。 HTML 代碼： 1 <!DOCTYPE html> 2 <

使用springmvc 接收上傳圖片，在手機 ios 上，有圖片上傳就不報錯，沒有就報下面這個錯誤，然後在pc端跟安卓手機上就不會有這個錯誤，這是為什麼呢？

七月 18, 2018 4:04:22 下午 org.apache.catalina.core.StandardWrapperValve invoke 嚴重: Servlet.service() for servlet [springMVC] in context with

springboot上傳圖片一段時間不用,再次上傳報錯

The temporary upload location [/tmp/tomcat.7629195566189872429.5002/work/Tomcat/localhost/ROOT] is not valid 原因: linux自動清理了tmp/下的springboot的tomcat零時

SpringMVC——jsp上傳圖片報錯The current request is not a multipart request的解決辦法

報錯介面如下：主要報錯語句為： The current request is not a multipart request 就是說當前這個請求不是一個multipart request，也就是說不是上傳檔案的請求。那怎麼辦呢？這裡我們需要知道一點，

springboot 上傳圖片報錯檔案大小的問題解決辦法

前面省略N，直接上傳然後報錯程式碼截圖:nested exception is org.springframework.web.multipart.MultipartException: Could not parse multipart servlet request; n

Thinkphp iis 上傳圖片報錯（非法影象檔案）問題解決辦法！

報錯：非法影象檔案！環境：iis7.5/fastcgi php5.5.24 php.ini中 upload_tmp_dir 目錄許可權都設定ok 首先我們看原始碼： /* 對影象檔案進行嚴格檢測 */ $ext = strtolower

FastDFS(fdfs)遇到的坑之一,本地fastdfs-client-java開發上傳圖片報錯:java.net.SocketTimeoutException: connect timed out

前置: 我在伺服器上配置了FDFS服務, 伺服器上上傳等測試都通過了，沒問題，後來到本地開發，用fastdfs-client-java-1.27.jar開發包來連結伺服器，上傳圖片報錯: java.net.SocketTimeoutException: connect

上傳圖片時等比縮放的一個小小算法

lba sim image 委托 fromfile tps 獲取 head 引用 protected void Button1_Click(object sender, EventArgs e) { int width = 300, h

關於博客不能顯示上傳圖片的問題

瀏覽器剛寫博客就發現了一個比較頭疼的問題，圖片好好的，不能上傳。好不容易上傳成功，圖居然裂了。崩潰！！百度了一下解決辦法都不管用。突然想到前幾天因為系統太慢關了幾個服務。可能是那裏出了問題。果不其然，正是因為iis服務關閉導致的。解決方案一：右鍵"此電腦"-->"管理"-->"服務和應用程

summernote + spring mvc + ajax 上傳圖片 <筆記>

jsp頁面答案 cnblogs ase 技術上傳圖片理想很多 1-1 最近在做一個考試系統項目。其中實體答案有這樣的需求，答案A,B,C,D 采用文本和圖片混搭的形式，並且文本也是富文本。數據庫中大概是這麽存的廢話不多說開始上幹貨。。。。一、首先在j

一個不報錯的summernote 上傳圖片案例

相關推薦