[ASP.net] Summernote 圖片上傳存成實體檔案而不是預設的base64

2016-06-14

Summernote 套件蠻常使用的,但是他圖片上傳預設是base64 所以預設的Code 是長這樣
image

因為 code 很多會變得有點慢,這點如何解決呢? 此測試版為 0.8.1

首先我們得先建立一個接受檔案上傳的檔案,這邊範例我只要收到檔案就預設存在網站跟目錄且叫做sample.gif ,當然這一塊你可以改寫
risiv.aspx C# sample Code :

using System;
using System.IO;
using System.Web;
using System.Web.UI;

namespace SummernoteUploadImage
{
     public partial class risiv : Page
     {
         protected void Page_Load(object sender, EventArgs e)
         {


             try
             {
                 HttpPostedFile img = Request.Files["img"];
                 //收到img參數裡面為檔案實體存成跟目錄下sample.gif
                 using (FileStream fs = File.Create((AppDomain.CurrentDomain.BaseDirectory + "sample.gif")))
                 {
                     SaveFile(img.InputStream, fs);
                 }
                 //成功後直接回傳檔名
                 Response.Write("sample.gif");
                
             }
             catch (Exception ex)
             {
                 //這邊當然你可以作錯誤處理可能去回吐一個錯誤圖闢入error.gif
                 //但是這邊我方便debug 就是直接讓他吐錯誤資訊
                 Response.Write("error:" + ex.Message);
             }
         }

         private void SaveFile(Stream stream, FileStream fs)
         {
             try
             {
                 byte[] buffer = new byte[4096];
                 int bytesRead;
                 while ((bytesRead = stream.Read(buffer, 0, buffer.Length)) != 0)
                 {
                     fs.Write(buffer, 0, bytesRead);
                 }
             }
             catch (Exception ex)
             {
                 Response.Write("error:" + ex.Message);
             }
         }
     }
}

之後我們看一下html 跟 javascript 端的code :

<script>

     function uploadImage(image) {
         var data = new FormData();
         data.append("img", image);
         $.ajax({
             //上傳路徑
             url: 'risiv.aspx',
             cache: false,
             contentType: false,
             processData: false,
             data: data,
             type: "post",
             success: function (url) {
                 var image = $('<img>').attr('src', url);
                 //會來後再編輯點插入該圖片,因為回傳是網址只要處理src 即可
                 $('.summernote').summernote("insertNode", image[0]);
             },
             error: function (data) {
                 console.log(data);
             }
         });
     }



     //初始化 summernote
     $(document).ready(function () {
         $('.summernote').summernote({
             height: '500px',
             callbacks: {
                 onImageUpload: function (image) {
                     uploadImage(image[0]);
                 }
             }
         });
     });


</script>

大致這樣就可以完成了,希望幫助到有需要的人

參考資料:
http://summernote.org/deep-dive/#callbacks
http://stackoverflow.com/questions/21628222/summernote-image-upload

source code :
https://www.dropbox.com/s/kueouyasf1l0dyv/SummernoteUploadImage.7z?dl=0


當麻許的超技八 2014 | Donma Hsu Design.