可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I have problem with editor Summernote. I want to upload images into a catalog on server. I have some script:
<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>
Of course I have all js and css files. What i do wrong? If I click on image upload and go to the editor, the image is not in textarea.
If I delete sendFile function and onImageUpload: the image save on base64.
Link to summernote: http://hackerwins.github.io/summernote/
回答1:
I tested this code and 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 = '/assets/images/' . $filename; //change this directory $location = $_FILES["file"]["tmp_name"]; move_uploaded_file($location, $destination); echo 'http://test.yourdomain.al/images/' . $filename;//change this URL } else { echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error']; } }
回答2:
Image Upload for Summernote v0.8.1
for large images
$('#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); } }); }
回答3:
UPLOAD IMAGES WITH PROGRESS BAR
Thought I'd extend upon user3451783's answer and provide one with an HTML5 progress bar. I found that it was very annoying uploading photos without knowing if anything was happening at all.
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'); } } }
