summernote图片上传功能保存到服务器指定文件夹+php代码+java方法
1.summernote富文本编辑器
summernote是一款基于bootstrap的富文本编辑器，是一款十分好用的文本编辑器，还附带有图片和文件上传功能。
那么在我们网站中想吧这个图片上传到服务器指定文件夹中，就要在选择图片是进行ajax移动图片。
1.1了解summernote本身图片保存方式。
summernote默认保存的是图片的base64数据，并没有存储图片文件。
2.进行summernote图片的保存
Html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> //这个css和js请到官网进行下载（点击上面的summernote就可以直达官网）
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> </head>
<body>
<form action="{:U(upload/upload)}" method="post">
<div id="summernote"><p>Hello Summernote</p></div>
<input type="submit" value="提交">
</form>
</body>
</html>
从Html代码中就可以看出怎么使用这个富文本编辑器
直接<div id="summernote"><p>Hello Summernote</p></div>
因为下面代码的缘故，这里的id最好用summernote（你也可以改，如果不嫌麻烦，官方都是这么用的）
JS代码：
<script type="text/javascript">
//调用富文本编辑
$(document).ready(function() {
var $summernote = $('#summernote').summernote({
height: 300,
minHeight: null,
maxHeight: null,
focus: true,
//调用图片上传
callbacks: {
onImageUpload: function (files) {
sendFile($summernote, files[0]);
}
}
}); //ajax上传图片
function sendFile($summernote, file) {
var formData = new FormData();
formData.append("file", file);
$.ajax({
url: "{:U('Upload/upload_img')}",//路径是你控制器中上传图片的方法，下面controller里面我会写到
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (data) {
$summernote.summernote('insertImage', data, function ($image) {
$image.attr('src', data);
});
}
});
}
});
</script>
Controller控制器
public function upload_img()
{
if ($_FILES) {
if (!$_FILES['file']['error']) {
//生成的文件名（时间戳，精确到毫秒）
list($usec, $sec) = explode(" ", microtime());
$name = ((float)$usec + (float)$sec) * 1000; $ext = explode('.', $_FILES['file']['name']);
$filename = $name . '.' . $ext[1];
$folder = date("Ymd");
$targetDir = C('UPLOAD_PICTURE_URL') . $folder;
//如果上传的文件夹不存在，则创建之
if ($targetDir) {
@mkdir($targetDir);
} //文件目录
$targetDir_url = $targetDir . '/article';
//如果上传的文件夹不存在，则创建之
if ($targetDir_url) {
@mkdir($targetDir_url);
} //图片上传的具体路径就出来了
$destination = $targetDir_url . DIRECTORY_SEPARATOR . $filename; //change this directory
$location = $_FILES["file"]["tmp_name"]; //将图片移动到指定的文件夹****核心代码
move_uploaded_file($location, $destination);
echo C('UPLOAD_PICTURE') . $folder . '/article' . DIRECTORY_SEPARATOR . $filename;//change this URL
} else {
echo $message = 'Ooops! Your upload triggered the following error: ' . $_FILES['file']['error'];
}
}
}
以上就是把用富文本编辑器在选择图片的时候，通过ajax传递数据，controller把图片移动到指定服务器文件夹中，并且在编辑器中显示出来图片。
效果：
3.提交图片，将数据插入到数据库中
上面js和controller配合将图片移动到指定的服务器文件夹中，然后ajax返回图片的完整路径以及保存的图片名，以<img src="Uploads/..../1.jpg">放入编辑文本中，点击提交保存到数据库中。
接下来点击提交按钮，进行文本的提交。
public function upload(){
//将form表单提交的内容存入数据库
}
form表单提交的内容都会保存吧！
4.关于java代码
关于使用java的方法，上面的html和js代码基本没啥改动，就是ajax路径不同，其他的很好改的，
这里有篇关于官方的java的demo演示，大家可以参考一下：http://wb-mgrigorov.rhcloud.com/summernote
以上就是完整的summernote富文本编辑器保存图片到服务器指定文件夹，相当完整，99%会解决你的烦恼，如果解决了你的问题，记得帮我点个赞哦！！这是我到国外网站学习到的，很难得，就跟大家一起分享！！！
记得点赞，帮你解决问题，也是对我的肯定！点赞！谢谢！
文本编辑后，我们得到的是带有html标签的内容，那么怎么把这些带有html标签的内容在文章中显示出来呢，请观看续集：http://www.cnblogs.com/jingmin/p/6602658.html
summernote图片上传功能保存到服务器指定文件夹+php代码+java方法的更多相关文章
- Android网络图片转换成bitmap保存到本地指定文件夹
下列代码,请求网络图片转换为bitmap,然后保存到指定文件夹,微信,QQ分享,要求缩略图不大于32kb 压缩图片代码,使用了Glide来进行图片压缩处理 Glide.get(ShopDetailsA ...
- Selenium+Python+Webdriver:保存截图到指定文件夹
保存图片到指定文件夹: from selenium import webdriverfrom pathlib import Pathfrom time import sleepdriver = web ...
- js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Asp.net 获取服务器指定文件夹目录文件，并提供下载
string dirPath = HttpContext.Current.Server.MapPath("uploads/"); if (Directory.Exists(dirP ...
- megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题
最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...
- Ueditor图片上传功能的配置
之前的项目中碰到过图片上传功能的配置问题,但是没有记录下来,今天有个朋友突然又问到了我这个问题,当时没想起来之前怎么解决的,后来看了Ueditor的官方文档才回想起来. 官网文档巨多,一般大家遇到问题 ...
- java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例
java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...
- drupal中安装CKEditor文本编辑器，并配置图片上传功能 之 方法二
drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...
- Java Servlet图片上传至指定文件夹并显示图片
在学习Servlet过程中,针对图片上传做了一个Demo,实现的功能是:在a页面上传图片,点击提交后,将图片保存到服务器指定路径(D:/image):跳转到b页面,b页面读取展示绝对路径(D:/ima ...
随机推荐
- android 布局文件中控件ID、name标签属性的命名包含“@”、“.”、“+”等等符号的含义
1. 在项目的根目录有个配置文件“AndroidManifest.xml”,是用来设置Activity的属性的如 <?xml version="1.0" encoding=& ...
- 网页导出excel文件
response.setContentType("application/vnd.ms-excel"); response.setHeader("content-disp ...
- 深度解析Java多线程的内存模型
内部java内存模型 硬件层面的内存模型 Java内存模型和硬件内存模型的联系 共享对象的可见性 资源竞速 Java内存模型很好的说明了JVM是如何在内存里工作的,JVM可以理解为java执行的一个操 ...
- [洛谷P2491] [SDOI2011]消防
洛谷题目链接:[SDOI2011]消防 题目描述 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超 ...
- 【poj2114】点分治（离线）
boatherds 2s 64M by czy 求一颗树上距离为K的点对是否存在 输入数据 n,m 接下来n-1条边a,b,c描述a到b有一条长度为c的路径 接下来m行每行询问一个K 输出数据 对于每 ...
- 27、简述redis的有哪几种持久化策略及比较？
Redis 提供了多种不同级别的持久化方式: RDB 持久化可以在指定的时间间隔内生成数据集的时间点快照(point-in-time snapshot). AOF 持久化记录服务器执行的所有写操作命令 ...
- 数字签名算法rsa
数字签名算法消息传递模型 由消息发送方构建密钥对,这里由甲方完成. 由消息发送方公布公钥至消息接收方,这里由甲方将公钥公布给乙方. 注意如加密算法区别,这里甲方使用私钥对数据签名,数据与签名形成一则消 ...
- 关于解决coursera视频缓冲问题
关于解决coursera视频缓冲问题 之前使用coursera,不FQ的话,视频根本加载不出来,于是每次都FQ过去看的视频.后来发现可以直接修改hosts就可以了. 以下方法来源知乎的回答(侵删). ...
- vue路由-基础
安装 1.直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js 在 Vue 后面加载 vue-router,它会自动安装的: <s ...
- linux编程之文件操作
在linux下用文件描述符来表示设备文件盒普通文件,文件描述符是一个整型的数据,所有对文件的操作都是通过文件描述符来实现的. 文件描述符是文件系统中连接用户空间和内核空间的枢纽,当我们打开一个或者创建 ...