[英]Summernote 0.8.12 Image Upload And Delete
為此,您需要使用對 function 的回調來處理您的上傳 - 在我的情況下,我的 Summernote 如下(相關性非常簡化):
$('.editor').summernote({
toolbar: [
['insert', ['link', 'picture']]
],
callbacks: {
onImageUpload: function(image) {
uploadSNImage(image[0]);
},
onMediaDelete : function(target) {
deleteSNImage(target[0].src);
}
}
});
回調表示,當上傳圖像時,它會調用名為 uploadSNImage 的 function。
這個 function 看起來像:
function uploadSNImage(image, editor) {
var data = new FormData();
data.append("image", image);
$.ajax({
url: 'YOUR UPLOAD SCRIPT',
cache: false,
contentType: false,
processData: false,
data: data,
type: "post",
success: function(url) {
var image = $('<img>').attr('src', url);
editor.summernote("insertNode", image[0]);
},
error: function(data) {
}
});
}
您將需要在您的服務器上將 url 更改為 url,這將獲取圖像並對其進行驗證,將其存儲在某處等等,但這實際上將允許將圖像傳遞給該腳本。
該腳本中的 output 應該是 url 到您上傳的文件,以便您可以在 function 的成功部分中使用它。
要以類似的方式刪除作品,除了這次您在回調中使用 onMediaDelete - 這再次調用 function 和 ajax 調用腳本以刪除圖像(已編輯以包括上面的內容)。
您的刪除 function 然后看起來像:
function deleteSNImage(src) {
$.ajax({
data: {src : src},
type: "POST",
url: "YOUR DELETE SCRIPT",
cache: false,
success: function(data) {
alert(data);
}
});
}
@bhttoan 我添加了你提供的刪除代碼,但是圖片還是沒有刪除JS
$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
for(let i=0; i < files.length; i++) {
$.upload(files[i]);
}
}
},
height: 500,
});
$.upload = function (file) {
let out = new FormData();
out.append('file', file, file.name);
$.ajax({
method: 'POST',
url: 'upload.php',
contentType: false,
cache: false,
processData: false,
data: out,
success: function (img) {
$('#summernote').summernote('insertImage', img);
},
error: function (jqXHR, textStatus, errorThrown) {
console.error(textStatus + " " + errorThrown);
}
});
};
上傳.PHP
<?php if ($_FILES['file']['name']) {if (!$_FILES['file']['error']){
$name = md5(rand(100, 200));
$ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$destination = '..//uploads/cached/' . $filename; //change this directory
$location = $_FILES["file"]["tmp_name"];
move_uploaded_file($location, $destination);
echo '..//uploads/cached/' . $filename;
}else{
echo $message = 'Ooops! Your upload triggered the following error: '.$_FILES['file']['error'];
}
} ?>
編輯
@bhttoan 我添加了你提供的刪除代碼,但是圖片仍然沒有被刪除
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.