1.summernote富文本编辑器

　　

　　summernote是一款基于bootstrap的富文本编辑器，是一款十分好用的文本编辑器，还附带有图片和文件上传功能。

　　那么在我们网站中想吧这个图片上传到服务器指定文件夹中，就要在选择图片是进行ajax移动图片。

　　1.1了解summernote本身图片保存方式。

　　summernote默认保存的是图片的base64数据，并没有存储图片文件。

　　

2.进行summernote图片的保存

　　Html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Summernote</title>
  6.   <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  7.   <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
  8.   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
  9.  
  10. //这个css和js请到官网进行下载（点击上面的summernote就可以直达官网）
  11.   <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  12.   <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
  13.  
  14. </head>
  15. <body>
  16. <form action="{:U(upload/upload)}"  method="post">
  17.   <div id="summernote"><p>Hello Summernote</p></div>
  18.    <input type="submit" value="提交">
  19. </form>
  20. </body>
  21. </html>

　　从Html代码中就可以看出怎么使用这个富文本编辑器

　　直接<div id="summernote"><p>Hello Summernote</p></div>

　　因为下面代码的缘故，这里的id最好用summernote（你也可以改，如果不嫌麻烦，官方都是这么用的）

JS代码：

  1. <script type="text/javascript">
  2.     //调用富文本编辑
  3.     $(document).ready(function() {
  4.         var $summernote = $('#summernote').summernote({
  5.             height: 300,
  6.             minHeight: null,
  7.             maxHeight: null,
  8.             focus: true,
  9.             //调用图片上传
  10.             callbacks: {
  11.                 onImageUpload: function (files) {
  12.                     sendFile($summernote, files[0]);
  13.                 }
  14.             }
  15.         });
  16.  
  17.         //ajax上传图片
  18.         function sendFile($summernote, file) {
  19.             var formData = new FormData();
  20.             formData.append("file", file);
  21.             $.ajax({
  22.                 url: "{:U('Upload/upload_img')}",//路径是你控制器中上传图片的方法，下面controller里面我会写到
  23.                 data: formData,
  24.                 cache: false,
  25.                 contentType: false,
  26.                 processData: false,
  27.                 type: 'POST',
  28.                 success: function (data) {
  29.                     $summernote.summernote('insertImage', data, function ($image) {
  30.                         $image.attr('src', data);
  31.                     });
  32.                 }
  33.             });
  34.         }
  35.     });
  36. </script>

Controller控制器

  1. public function upload_img()
  2.     {
  3.         if ($_FILES) {
  4.             if (!$_FILES['file']['error']) {
  5.                 //生成的文件名（时间戳，精确到毫秒）
  6.                 list($usec, $sec) = explode(" ", microtime());
  7.                 $name = ((float)$usec + (float)$sec) * 1000;
  8.  
  9.                 $ext = explode('.', $_FILES['file']['name']);
  10.                 $filename = $name . '.' . $ext[1];
  11.                 $folder = date("Ymd");
  12.                 $targetDir = C('UPLOAD_PICTURE_URL') . $folder;
  13.                 //如果上传的文件夹不存在，则创建之
  14.                 if ($targetDir) {
  15.                     @mkdir($targetDir);
  16.                 }
  17.  
  18.                 //文件目录
  19.                 $targetDir_url = $targetDir . '/article';
  20.                 //如果上传的文件夹不存在，则创建之
  21.                 if ($targetDir_url) {
  22.                     @mkdir($targetDir_url);
  23.                 }
  24.  
  25.                //图片上传的具体路径就出来了
  26.                 $destination = $targetDir_url . DIRECTORY_SEPARATOR . $filename; //change this directory
  27.                 $location = $_FILES["file"]["tmp_name"];
  28.  
  29.                 //将图片移动到指定的文件夹****核心代码
  30.                 move_uploaded_file($location, $destination);
  31.                 echo C('UPLOAD_PICTURE') . $folder . '/article' . DIRECTORY_SEPARATOR . $filename;//change this URL
  32.             } else {
  33.                 echo $message = 'Ooops!  Your upload triggered the following error:  ' . $_FILES['file']['error'];
  34.             }
  35.         }
  36.     }

　　以上就是把用富文本编辑器在选择图片的时候，通过ajax传递数据，controller把图片移动到指定服务器文件夹中，并且在编辑器中显示出来图片。

效果：

3.提交图片，将数据插入到数据库中

　　上面js和controller配合将图片移动到指定的服务器文件夹中，然后ajax返回图片的完整路径以及保存的图片名，以<img src="Uploads/..../1.jpg">放入编辑文本中，点击提交保存到数据库中。

　　

　　接下来点击提交按钮，进行文本的提交。

  1. public function upload(){
  2.      //将form表单提交的内容存入数据库
  3. }

　　form表单提交的内容都会保存吧！

4.关于java代码

　　关于使用java的方法，上面的html和js代码基本没啥改动，就是ajax路径不同，其他的很好改的，

这里有篇关于官方的java的demo演示，大家可以参考一下：http://wb-mgrigorov.rhcloud.com/summernote

还有官方的源代码：https://github.com/l0rdn1kk0n/wicket-bootstrap/tree/4f97ca783f7279ca43f9e2ee790703161f59fa40/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/editor

以上就是完整的summernote富文本编辑器保存图片到服务器指定文件夹，相当完整，99%会解决你的烦恼，如果解决了你的问题，记得帮我点个赞哦！！这是我到国外网站学习到的，很难得，就跟大家一起分享！！！

记得点赞，帮你解决问题，也是对我的肯定！点赞！谢谢！

文本编辑后，我们得到的是带有html标签的内容，那么怎么把这些带有html标签的内容在文章中显示出来呢，请观看续集：http://www.cnblogs.com/jingmin/p/6602658.html

　　

　　

summernote图片上传功能保存到服务器指定文件夹+php代码+java方法的更多相关文章

  1. Android网络图片转换成bitmap保存到本地指定文件夹

    下列代码,请求网络图片转换为bitmap,然后保存到指定文件夹,微信,QQ分享,要求缩略图不大于32kb 压缩图片代码,使用了Glide来进行图片压缩处理 Glide.get(ShopDetailsA ...

  2. Selenium+Python+Webdriver:保存截图到指定文件夹

    保存图片到指定文件夹: from selenium import webdriverfrom pathlib import Pathfrom time import sleepdriver = web ...

  3. js获取base64格式图片预览上传并用php保存到本地服务器指定文件夹

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. Asp.net 获取服务器指定文件夹目录文件，并提供下载

    string dirPath = HttpContext.Current.Server.MapPath("uploads/"); if (Directory.Exists(dirP ...

  5. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  6. Ueditor图片上传功能的配置

    之前的项目中碰到过图片上传功能的配置问题,但是没有记录下来,今天有个朋友突然又问到了我这个问题,当时没想起来之前怎么解决的,后来看了Ueditor的官方文档才回想起来. 官网文档巨多,一般大家遇到问题 ...

  7. java模拟表单上传文件，java通过模拟post方式提交表单实现图片上传功能实例

    java模拟表单上传文件,java通过模拟post方式提交表单实现图片上传功能实例HttpClient 测试类,提供get post方法实例 package com.zdz.httpclient; i ...

  8. drupal中安装CKEditor文本编辑器，并配置图片上传功能 之 方法二

    drupal中安装CKEditor文本编辑器,并配置图片上传功能 之 方法一 中介绍了ckeditor的安装和配置方法,其实还有另一种新方法,不用IMCE模块. 不过需要ckfinder的JS库,可以 ...

  9. Java Servlet图片上传至指定文件夹并显示图片

    在学习Servlet过程中,针对图片上传做了一个Demo,实现的功能是:在a页面上传图片,点击提交后,将图片保存到服务器指定路径(D:/image):跳转到b页面,b页面读取展示绝对路径(D:/ima ...

随机推荐

  1. UVA129 暴力dfs，有许多值得学习的代码

    紫书195 题目大意:给一个困难的串,困难的串的定义就是里面没有重复的串. 思路:不需要重新对之前的串进行判重,只需要对当前的加入的字符进行改变即可. 因为是判断字典序第k个的字符串,所以要多一个全局 ...

  2. 持续集成之配置环境创建JOB

    1.安装mvn.gitlab插件 2.配置参数构建

  3. web api 支持cors

    1. configservice //******************* cors start *********************** var urls = Configuration[S ...

  4. mysql 多列唯一索引在事务中select for update是不是行锁？

    在表中有这么一索引 UNIQUE KEY `customer_id` (`customer_id`,`item_id`,`ref_id`) 问1. 这种多列唯一索引在事务中select for upd ...

  5. 省队集训Day1 总统选举

    [题目大意] 一个$n$个数的序列,$m$次操作,每次选择一段区间$[l, r]$,求出$[l, r]$中出现超过一半的数. 如果没有超过一半的数,那么就把答案钦定为$s$,每次会有$k$个数进行改变 ...

  6. 【BZOJ】2679: [Usaco2012 Open]Balanced Cow Subsets

    [算法]折半搜索+数学计数 [题意]给定n个数(n<=20),定义一种方案为选择若干个数,这些数可以分成两个和相等的集合(不同划分方式算一种),求方案数(数字不同即方案不同). [题解] 考虑直 ...

  7. [Unity]用PropertyDrawer自定义struct/class的外观

    一般来说,当我们要扩展编辑器时,我们会从Editor类继承,为自己的MonoBehaviour实现不同的外观. 但是如果有一个struct/class,在许多地方被使用,Unity默认的外观又不够好看 ...

  8. 【洛谷 P1525】 关押罪犯 （二分图+二分答案）

    题目链接 并查集+贪心当然是可以做的. 但我用二分图+二分答案. 二分一个\(mid\),删去所有边权小于等于\(mid\)的边,看有没有奇环存在,如果存在,则\(mid\)不行. #include ...

  9. html中的meta标签

    1.定义 meta元素提供页面的原信息,位于文档头部 2.必须的属性 content属性 该属性提供名称/值对中的值,使用要与http-equiv或name属性一起使用 3.可选的属性 3.1.htt ...

  10. vue中的图片加载与显示默认图片

    HTML: <div class="content-show-img"> <div class="show-img"> <img ...