summernote图片上传php,summernote实现图片上传至服务器功能2

先说说summernote吧&＃xff0c;第一眼看到他是在网上一些后台模板中&＃xff0c;简洁、漂亮、易用直接就吸引了我&＃xff0c;再看看自己之前用的CKEditor&＃xff0c;就略显的笨重了许多&＃xff0c;于是就想着把CKEditor换成summernote。

但是还有一个问题就是summernote在上传图片的时候&＃xff0c;会把图片转成图片的base64数据&＃xff0c;存储起来实在是太庞大了&＃xff0c;处理起来也不太方便&＃xff0c;想着将其上传到服务器存储&＃xff0c;然后返回图片路径。

下面是Demo&＃xff1a;

intest.php

function sendFile(file, editor, welEditable) {

data &＃61; new FormData();

data.append("file", file);

url &＃61; "http://www.unipcn.com/summernote/server.php?act&＃61;uploadImg";

console.log(&＃39;111111<>222222>>> &＃39;&＃43;url);

$.ajax({

data: data,

type: "POST",

url: url,

cache: false,

contentType: false,

processData: false,

success: function (url) {

console.log(&＃39;url:>>>&＃39;&＃43;url);

console.log(&＃39;editor:>>>&＃39;&＃43;editor);

$(&＃39;.summernote&＃39;).summernote(&＃39;insertImage&＃39;, url, &＃39;插入图片&＃39;);

}

});

}

$(function(){

// onImageUpload callback

$(&＃39;.summernote&＃39;).summernote({

&＃39;height&＃39;:300,

callbacks: {

onImageUpload: function(files,editor,welEditable) {

console.error(&＃39;Upload image start...&＃39;);

sendFile(files[0],editor,welEditable);

console.error(&＃39;Upload image end...&＃39;);

}

}

});

});

server.php

$action&＃61;isset($_REQUEST[&＃39;act&＃39;])?trim($_REQUEST[&＃39;act&＃39;]):&＃39;&＃39;;

if (&＃39;uploadImg&＃39;&＃61;&＃61;$action) {

if ($_FILES[&＃39;file&＃39;][&＃39;name&＃39;]) {

if (!$_FILES[&＃39;file&＃39;][&＃39;error&＃39;]) {

$name &＃61; md5(rand(100, 200));

$ext &＃61; explode(&＃39;.&＃39;, $_FILES[&＃39;file&＃39;][&＃39;name&＃39;]);

$filename &＃61; $name . &＃39;.&＃39; . $ext[1];

$destination &＃61; &＃39;./uploads/imgs/&＃39; . $filename; //change this directory

$location &＃61; $_FILES["file"]["tmp_name"];

move_uploaded_file($location, $destination);

echo &＃39;http://www.unipcn.com/summernote/uploads/imgs/&＃39; . $filename;//change this URL

}

else

{

echo $message &＃61; &＃39;Ooops! Your upload triggered the following error: &＃39;.$_FILES[&＃39;file&＃39;][&＃39;error&＃39;];

}

}

}