Summernote圖像上傳不起作用codeigniter

我已經在我的網站（使用Codeigniter建成）集成了summernote和文本工作正常。但是對於圖片上傳，出現了以下問題。Summernote圖像上傳不起作用codeigniter

Summernote將圖像讀取爲base64。現在這對於小圖像來說效果很好，但是一旦圖像很大，圖像最終不會由於數據庫中base64創建的巨大字符串而呈現。

所以我想保存圖像在我的服務器，然後使用該圖像的鏈接。

以下是代碼：的腳本summernote：

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#summernote').summernote({ 
    height: 300, 
    onImageUpload: function(files) { 
      sendFile(files[0]); 
     } 
    }); 
    function sendFile(file) { 
     data = new FormData(); 
     data.append("files", file); 
     upload_url = "<?php echo base_url(); ?>" + "general/upload_image"; 
     $.ajax({ 
      data: data, 
      type: "POST", 
      url: upload_url, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function(url) { 
       $(this).summernote("insertImage", url); 

      } 
     }); 
    } 
});

php的upload_image功能：

public function upload_image() 
{ 
    if ($_FILES['file']['name']) { 
     if (!$_FILES['file']['error']) { 
      $name = md5(rand(100, 200)); 
      $ext = explode('.', $_FILES['file']['name']); 
      $filename = $name . '.' . $ext[1]; 
      $destination = 'http://sitename.com/dist/img/blogimg/' . $filename; //change this directory 
      $location = $_FILES["file"]["tmp_name"]; 
      move_uploaded_file($location, $destination); 
      echo 'http://sitename.com/dist/img/blogimg/' . $filename;//change this URL 
     } 
     else 
     { 
      echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error']; 
     } 
    } 
}

現在

，當我在summernote或拖動點擊插入圖片和放下圖像控制檯中顯示以下錯誤的多個實例：

>Uncaught TypeError: Cannot read property 'nodeType' of undefined

這就是我想達到的， N.B.這位編輯是爲了博客。 1.用戶點擊插入圖片並從他的電腦上傳圖片。 2.圖像顯示在編輯器中（但在這一步沒有上傳到服務器）。 3.當用戶點擊提交按鈕時，圖像應該保存爲預定義文件夾中的圖像文件。 4.當頁面呈現它應該有

<img src="mysite.com/path_to_image">

現在是像

<img src="data:image/jpeg;base64,/9j/4AAQSkZJR....">)

請注意，我嘗試使用onImageUpload回調之內，但結果什麼也沒有實際發生，無論是圖像被上傳到編輯器或服務器中的文件夾。

我在哪裏錯了.... ??請幫我解決這個問題...

來源

2017-03-28 user3040284

只是一個建議codeigniter有它自己的上傳庫https://www.codeigniter.com/user_guide/libraries/file_uploading.html – user4419336

你最初的問題與基地64的大小可以通過更改爲LongText –

@ wolfgang1983上傳lib應該用在upload_image（）函數中嗎？你能否提供一個示例代碼來展示如何使用這個上傳庫來處理POST數據。 ??我不清楚... – user3040284

如果您summernote版本後0.7

下面這個

$('#summernote').summernote({ 
       height: 400, 
       callbacks: { 
        onImageUpload: function(files, editor, welEditable) { 
         sendFile(files[0]); 
        } 
       }});

來源

2017-03-29 08:04:46 user3734342

好吧，雖然我無法找到一個解決我的問題，我已經實現了交替解決方案它完美的作品，雖然PT。 3不適合並且圖像在上一步中上傳到服務器。這也可以用一些js腳本來處理......稍後會做...我所做的是我針對summernote id和classes，並添加了我的代碼來代替他們的代碼...

<style> 
 
/*to disable the upload image from computer uncomment this css code.*/ 
 
\t .note-group-select-from-files { 
 
    display: none; 
 
} 
 

 
</style>

接下來我插入低於其插入鏈接場我的HTML這樣：

document.getElementsByClassName('note-group-image-url')[0].insertAdjacentHTML('afterend','<p class="sober"><a href="#" data-toggle="modal" data-target="#imageModal"><p>Click here to upoad image</p></i></a></p>');

我這個代碼中刪除他們上傳的圖像場

接下來，我通過一個模式處理圖片上傳，並寫道，複製圖像的URL。注意，圖像的URL字段的自定義JS腳本

我也只好自定義插入圖像的的JavaScript帶有js的summernote按鈕，以便用戶可以直接點擊插入圖像。

來源

2017-03-29 15:47:30 user3040284

Summernote圖像上傳不起作用codeigniter

回答

相關問題