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回调之内，但结果什么也没有实际发生，无论是图像被上传到编辑器或服务器中的文件夹。

我在哪里错了.... ??请帮我解决这个问题...

只是一个建议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]); 
        } 
       }});

答

好吧，虽然我无法找到一个解决我的问题，我已经实现了交替解决方案它完美的作品，虽然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按钮，以便用户可以直接点击插入图像。

Summernote图像上传不起作用codeigniter

相关推荐