summernote 富文本编辑器上传本地图片 - 简书登录注册写文章首页下载APP会员IT技术summernote 富文本编辑器上传本地图片_不能说的秘密i关注赞赏支持summernote 富文本编辑器上传本地图片
jQuery version: 1.12.4
Bootstrap version: 3.3.7
summernote 是基于jQuery 和 Bootstrap 的轻量级富文本编辑器
所以在使用summernote之前必须先引入 jquery 和 Bootstrap
<!-- css -->
<link rel="stylesheet" href="static/plugins/Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="static/plugins/summernote/summernote.css">
<!-- javascript -->
<script src="static/plugins/jquery/jquery-1.12.4.min.js"></script>
<script src="static/plugins/Bootstrap/js/bootstrap.js"></script>
<script src="static/plugins/summernote/summernote.js"></script>
html 部分
<textarea id="summernote"></textarea>
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;
推荐阅读更多精彩内容Laravel 精选资源大全原文链接 必备品 文档：Documentation API：API Reference 视频：Laracasts ...layjoy阅读 8,220评论 0赞 121全栈开发自学路线前言 这里筑梦师,是一名正在努力学习的iOS开发工程师,目前致力于全栈方向的学习,希望可以和大家一起交流技术,共同...筑梦师Winston阅读 24,751评论 80赞 514Lisa Deng 【每日一精油】舒缓复方——疼痛的终结者舒缓复方精油包含著名并经研究证实其减缓发炎，减缓疼痛和减少酸痛的精油，有冬青、樟树、薄荷、蓝艾菊、德国洋甘菊、永久...LisaDeng阅读 1,565评论 0赞 1来我的世界里这一路，我们走的多匆忙 冥冥之中来不及对望 这一路，我们走的多猖狂 闭着眼还能轻握梦想 你说，儿时的仰望 抓不住存...策马天涯ss阅读 101评论 0赞 2你好波士顿帅气的名字呢嗯嗯嗯阅读 81评论 0赞 0论掏粪的姿势我已经习惯在电影院的小便池上方看到各大信贷机构的“高利贷”广告，或者在我们公司的小便池上方看到研发兄弟的各类创新产...佛祖保佑我主阅读 17,495评论 3赞 13亲爱的儿子，生日快乐！ 亲爱的儿子，生日快乐！ 不知不觉你已经八岁了，时间快的让我有点不敢相信：不敢相信眨眼间你已经是个二...何小燕阅读 443评论 0赞 1评论2赞赞1赞赞赏更多好文