富文本框TinyMCE4.8上传本地图片基本配置(后端篇)

哎,这个后端篇拖了一个月终于要开始了,现在想想发现自己的拖延症其实好严重,也有其他原因导致现在才想开始写博客。

废话少说,下面开始正题

说一下我用的是SSH框架,大家如果是使用PHP等开发语言其实逻辑是一样的。

先说一下逻辑思路:

xhr.open('POST', 'FileAction_updateFile');//第二个参数:如果是SSH框架就创建一个‘FileAction’的Action的‘updateFile’方法,如果是PHP页面就直接创建一个PHP页面,例如:updateFile.php,并将参数‘FileAction_updateFile’改为‘updateFile.php’

第一步:根据前台创建后台处理页面(FileAction.java)

第二步:上传文件/图片(如果是PHP页面,想必不用我教如何接收前台上传的文件/图片吧)

如果是SSH框架的话,框架会帮我们自动封装数据,我采用的是模型驱动,FileAction.java代码如下

package web;

import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionContext;
impo
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
TinyMCE是一款常用的文本编辑器,它提供了丰的功能,包括上图片的功能。下面是一个上图片的案例: 1. 在页面中引入TinyMCE编辑器的JS和CSS文件: ```html <!-- 引入TinyMCE编辑器的JS和CSS文件 --> <script src="//cdn.tinymce.com/4/tinymce.min.js"></script> <link href="//cdn.tinymce.com/4/skins/lightgray/skin.min.css" rel="stylesheet" /> ``` 2. 初始化TinyMCE编辑器,并设置上图片配置: ```javascript tinymce.init({ selector: '#editor', // 编辑器的选择器 height: 400, // 编辑器的高度 plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code' ], toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', // 设置上图片配置 images_upload_url: 'upload.php', // 上图片的URL images_upload_base_path: '/images/', // 图片保存的基本路径 images_upload_credentials: true, // 是否允许携带cookie等凭据 images_upload_handler: function (blobInfo, success, failure) { // 上图片的处理函数 var xhr, formData; xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open('POST', 'upload.php'); xhr.onload = function() { var json; if (xhr.status != 200) { failure('HTTP Error: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); if (!json || typeof json.location != 'string') { failure('Invalid JSON: ' + xhr.responseText); return; } success(json.location); }; formData = new FormData(); formData.append('file', blobInfo.blob(), blobInfo.filename()); xhr.send(formData); } }); ``` 3. 编写上图片的处理函数upload.php: ```php <?php if ($_FILES['file']['error'] === UPLOAD_ERR_OK) { // 上成功 $tmp_name = $_FILES['file']['tmp_name']; $name = $_FILES['file']['name']; $path = '/images/' . $name; move_uploaded_file($tmp_name, $path); // 返回上成功的信息 $result = array('location' => $path); echo json_encode($result); } else { // 上失败 echo json_encode(array('error' => '上失败')); } ?> ``` 以上就是一个上图片TinyMCE文本编辑器的案例。需要注意的是,上图片的处理函数需要根据实际情况修改,比如需要对上图片进行校验、压缩等处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值