summernoteリッチテキストエディタローカルピクチャをアップロード
3177 ワード
jQuery version: 1.12.4 Bootstrap version: 3.3.7
summernoteは
htmlセクション
JAvascriptコード
phpコード(laravel)
summernoteは
jQueryとBootstrapに基づく軽量レベルのリッチテキストエディタなのでsummernoteを使用する前にjqueryとBootstrapを導入する必要があります
htmlセクション
JAvascriptコード
let summer = $('#summernote');
summer.summernote({
callbacks: {
onImageUpload: function (files) {
sendFile(files);
}
}
});
/** * */
function sendFile(files) {
let imageData = new FormData();
imageData.append("imageData", files[0]);
$.ajax({
url: '/create/uploads', // url
type: 'POST',
data: imageData,
cache: false,
contentType: false,
processData: false,
dataType: 'json', // json
//
success: function ($result) {
let imgNode = document.createElement("img");
imgNode.src = $result.img;
summer.summernote('insertNode', imgNode);
},
//
error: function () {
console.log(' ');
}
});
}
phpコード(laravel)
namespace App\Http\Controllers;
use App\Note;
use Illuminate\Http\Request;
class NotesController extends Controller {
//
public function uploads(Request $request) {
//
$file = $request->file('imageData');
//
if (!$file->isValid() ) {
return json_encode(['status' => 0,'message' => ' ']);
}
//
$ext = $file->getClientOriginalExtension();
//
if (! in_array($ext,['jpg','png','gif'])) {
return json_encode(['status' => 0,'message' => ' ']);
}
// ,
$fileName = $this->setFilePath(_UPLOADS_.'/'.date('Y_m_d'),$ext);
//
if ( move_uploaded_file($file->getRealPath(),$fileName) ) {
return json_encode([
'status' => 1,
'message' => ' ',
'img' => $fileName
]);
}
}
/**
*
* @param string $path
* @param string $ext
* @return strint +
*/
public function setFilePath ($path,$ext) {
//
$path = rtrim($path,'/').'/';
$ext = '.'.trim($ext,'.');
//
if (! file_exists($path)) {
@mkdir($path);
}
//
do{
$fileName = time().mt_rand();
}while( file_exists($path.$fileName.$ext) );
return $path.$fileName.$ext;
}
}