首页 > 编程语言 >百度编辑器粘贴图片自动上传到服务器(Java版)

百度编辑器粘贴图片自动上传到服务器(Java版)

时间:2023-04-13 12:13:10浏览次数:49  
标签:Java 编辑器 upload ext fileName php 上传 粘贴

 如何做到 ueditor批量上传word图片?

1、前端引用代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>

 

   <title>编辑器完整版实例-1.2.6.0</title>

    <script type="text/javascript"src="ueditor.config.js"charset="utf-8"></script>

    <script type="text/javascript"src="ueditor.all.js"charset="utf-8"></script>

    <link type="text/css"rel="Stylesheet"href="WordPaster/css/WordPaster.css"/>

    <link type="text/css"rel="Stylesheet"href="WordPaster/js/skygqbox.css"/>

    <scrip ttype="text/javascript"src="WordPaster/js/json2.min.js"charset="utf-8"></script>

    <scrip ttype="text/javascript"src="WordPaster/js/jquery-1.4.min.js"charset="utf-8"></script>

    <scrip ttype="text/javascript"src="WordPaster/js/WordPaster.js"charset="utf-8"></script>

    <scrip ttype="text/javascript"src="WordPaster/js/skygqbox.js"charset="utf-8"></script>

</head>

<body>

    <textarea name="后台取值的key"id="myEditor">这里写你的初始化内容</textarea>

    <script type="text/javascript">

        var pasterMgr = new WordPasterManager();

    pasterMgr.Config["PostUrl"] = "http://localhost:81/WordPaster2/WordPasterUEditor1x/php/upload.php"

    pasterMgr.Load();//加载控件

 

          UE.getEditor('myEditor',{onready:function(){//创建一个编辑器实例

              pasterMgr.SetEditor(this);

          }});

    </script>

</body>

</html>

请求

文件上传的默认请求是一个文件,作为具有“upload”字段的表单数据。

响应:文件已成功上传

当文件成功上传时的JSON响应:

uploaded- 设置为1。

fileName - 上传文件的名称。

url - 上传文件的URL。

响应:文件无法上传

uploaded- 设置为0。

error.message - 要显示给用户的错误消息。

2、粘贴word里面的图片路径是fill://D 这种格式 我理解这种是非浏览器安全的 许多浏览器也不支持

目前项目是用了一种变通的方式:

先把word上传到后台 、poi解析、存储图片 、转换html、替换图片、放到富文本框里显示

(富文本显示有个坑:没找到直接给富文本赋值的方法 要先销毁 记录下

success : function(data) {

     $('#content').attr('value',data.imagePath);

     var editor = CKEDITOR.instances["content"]; //你的编辑器的"name"属性的值

     if (editor) {

       editor.destroy(true);//销毁编辑器

      }    

     CKEDITOR.replace('content'); //替换编辑器,editorID为ckeditor的"id"属性的值

     $("#content").val(result);    //对editor赋值

     //CKEDITOR.instances.contentCkeditor.setData($("#content").text());

 }

3.接收上传的图片并保存在服务端

<?php

ob_start();

//201201/10

$timeDir =date("Ym")."/".date("d");

$uploadDir =dirname(__FILE__).'/upload/'.$timeDir;

$curDomain = "http://".$_SERVER["HTTP_HOST"]."/";

//相对路径 http://www.ncmem.com/upload/2012-1-10/

$relatPath = $curDomain ."WordPaster2/WordPasterUEditor1x/php/upload/" . $timeDir . "/";

 

//自动创建目录。upload/2012-1-10

if(!is_dir($uploadDir))

{

mkdir($uploadDir,0777,true);

}

 

//如果PHP页面为UTF-8编码,请使用urldecode解码文件名称

//$fileName = urldecode($_FILES['postedFile']['name']);

//如果PHP页面为GB2312编码,则可直接读取文件名称

$fileName = $_FILES['file']['name'];

$tmpName = $_FILES['file']['tmp_name'];

 

//取文件扩展名jpg,gif,bmp,png

$path_parts =pathinfo($fileName);

$ext = $path_parts["extension"];

$ext =strtolower($ext);//jpg,png,gif,bmp

 

//只允许上传图片类型的文件

if($ext == "jpg"

    || $ext == "jpeg"

    || $ext == "png"

    || $ext == "gif"

    || $ext == "bmp")

{

    //年_月_日_时分秒毫秒.jpg

    $saveFileName = $fileName;

 

    //xxx/2011_05_05_091250000.jpg

    $savePath = $uploadDir . "/" . $saveFileName;

 

    //另存为新文件名称

    if (!move_uploaded_file($tmpName,$savePath))

    {

exit('upload error!' . "文件名称:" .$fileName . "保存路径:" . $savePath);

    }

}

 

//输出图片路径

//$_SERVER['HTTP_HOST']   localhost:81

//$_SERVER['REQUEST_URI'] /FCKEditor2.4.6.1/php/test.php

$reqPath =str_replace("upload.php","",$_SERVER['REQUEST_URI']);

echo $relatPath .  $saveFileName;

header('Content-type: text/html; charset=utf-8');

header('Content-Length: ' .ob_get_length());

?>

效果展示:

 

在使用前需要配置一下

更多详细资料可以参考这篇文章:

详细思路及源码

示例下载:

wordpaster-vue3-cli-ueditor1.5wordpaster-vue-ueditor1.5wordpaster-asp.net-ueditor1.5xwordpaster-php-ueditor1xwordpaster-jsp-ueditor1x​

标签:Java,编辑器,upload,ext,fileName,php,上传,粘贴
From: https://www.cnblogs.com/songsu/p/17314195.html

相关文章

  • JAVA使用OpenOffice文件转换
    下载jar包maven中央仓库包不支持docx文件所以不建议使用。jar包是为了方便链接下载链接:https://nchc.dl.sourceforge.net/project/jodconverter/JODConverter/2.2.2/jodconverter-2.2.2.zip 解压后找到:jodconverter-2.2.2\jodconverter-2.2.2\lib\jodconverter-2.2.2.jar放......
  • 4、Web前端学习规划:JavaScript - 学习规划系列文章
          JavaScript作为Web前端里的第3重要的语言,笔者认为该重点进行学习。因为JavaScript衍生出来的框架和类库有不少,而且很强大。所以JavaScript的学习要抓好重点,在基本的语法及应用上学习相关的框架和类库,更好的为Web前端的开发应用做好准备。 1、简介;JavaSc......
  • Java 深拷贝浅拷贝
    Arrays.copyOf()方法在底层是调用了System.arraycopy() 对于基本数据类型来说System.arraycopy()方法是深拷贝,对于引用数据类型来说System.arraycopy()方法是浅拷贝。总结:拷贝方式数值类型引用类型推荐使用for循环深拷贝浅拷贝 copyOf深拷贝浅拷贝推荐......
  • 用java做一个并发10W的网站,需要用到的技术有这些!
        你需要使用以下技术和工具:JavaWeb框架:选择一个性能高、可扩展性好、易于使用和维护的JavaWeb框架,如SpringMVC、Struts2、PlayFramework等。数据库:使用高性能的数据库系统,如MySQL、PostgreSQL、Oracle等。使用数据库连接池可以提高性能。缓存:使用缓存可......
  • Java基础语法
    Java基础语法注释、标识符、关键字注释注释并不会被执行,是给我们程序员看的书写注释是一个非常好的习惯Java注释的分类:单行注释://多行注释:/***/文档注释标识符标识符的作用用来表示变量名、类名、方法名、数组名和文件名等是一个有效的字......
  • Java流程控制
    Java流程控制用户交互ScannerScanner对象Java提供了一个工具类,可以通过Scanner类来获取用户的输入基本语法Scanners=newScanner(System.in)通过Scanner类的next()与nextLine()方法获取输入的字符串,再读取钱我们一般需要使用hasNext()和hasNextLine()判断是否有还......
  • 基于Java+uniapp小程序实现餐厅校园订餐平台
    基于Java+Vue+uniapp微信小程序实现餐厅校园订餐平台博主介绍:5年java开发经验,专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域一、前言介绍:传统的校园订餐管理方式都在使用手工记录的方式进行数据的登记,这种方式耗时,而且对于数据量比较大的情况想......
  • 基于Java+Springboot+vue网上商品订单转手系统设计和实现
    基于Java+Springboot+vue网上商品订单转手系统设计和实现一、前言介绍:1.1项目摘要传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装网上商品订单转手系统软件来发挥其高效地信息处理......
  • Javascript对象
    对象对象是一组无序的相关属性和方法的集合,所有事物都是对象,例如字符串,数值,数组,函数对象由属性和方法组成属性:事物的特征,常用名词方法:事物的行为,常用动词创建对象利用对象字面量创建对象varobj={uname:'tom',age:18,sex:'男',......
  • 一个Java web 应用系统的需求文档示例:
    #需求文档##引言本文档旨在描述一个在线商城网站的需求,并给出设计方案。该网站是一个B2C电商平台,旨在提供给用户方便快捷的购物体验。本文档面向的读者包括项目经理、开发人员、测试人员和其他与该系统相关的人员。##功能需求本次需求的功能需求包括:1.用户登录和注......