您的当前位置:首页正文

UEditor编辑器上传图片开发流程_html/css_WEB-ITnose

2023-11-28 来源:91汽车资讯网

在ueditor目录下找到uedior.config.js,找到如下三行:

1 ,imageUrl: "<%=path %>/controller.json" //图片上传提交后台对应的地址,路径固定为*/controller.*2 ,imagePath: "<%=path %>/ueditor/" //图片在服务器上的存储目录3 ,imageFieldName: "upload" //后台对应接收image的参数名

或者:

var ueditor = UE.getEditor('myEditor',{ imageUrl: "<%=path %>/servlet/UploadServlet", //图片上传提交后台对应的地址 imagePath: "<%=path %>/ueditor/", //图片在服务器上的存储目录 imageFieldName: "upload" //后台对应接收image的参数名});

注意:记得在uedior.config.js配置文件中把"serverUrl"注释掉

在/ueditor/_src/plugins/simpleupload.js文件中,把link = me.options.imageUrlPrefix + json.url; 改为link = getRootPath()+json.url;

最后配置服务器返回的数据格式,这需要这服务器端进行修改。对应于后台接收上传图片的那个controller,返回的格式需如下:

{'url':'60391393848223.jpg','title':'p1999637039.jpg','original':'p1999637039.jpg','state':'SUCCESS'}

注意:url用相对路径,这样就OK了。

//js获取项目根路径,如: http://localhost:8083/uimcardprjfunction getRootPath(){ //获取当前网址,如: http://localhost:8083/uimcardprj/share/meun.jsp var curWwwPath=window.document.location.href; //获取主机地址之后的目录,如: uimcardprj/share/meun.jsp var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); //获取主机地址,如: http://localhost:8083 var localhostPaht=curWwwPath.substring(0,pos); //获取带"/"的项目名,如:/uimcardprj var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); //return localhostPaht + projectName; return localhostPaht+"/";}

小编还为您整理了以下内容,可能对您也有帮助:

ueditor 1.5版本单独调用图片上传如何实现?

    在页面中引入UEditor的核心文件ueditor.config.js和ueditor.all.min.js以及需要使用的语言文件(如zh-cn.js)。

    创建一个容器,用于显示UEditor编辑器。

    在JavaScript中创建一个UEditor实例并配置相关参数。其中,需要设置上传图片的配置项,包括图片上传的接口地址和其他参数。例如:

    在UEditor实例中调用图片上传的方法。例如:

或者,可以直接在UEditor编辑器中点击图片上传按钮进行图片上传操作。在上传成功后,UEditor将自动将上传的图片插入到编辑器中。

注意:图片上传接口需要根据实际情况进行开发,并返回一个符合UEditor要求的JSON格式数据,其中包含上传图片的状态、图片地址等信息。UEditor默认使用POST方式上传图片,如果需要使用其他方式,可以通过配置项进行设置。

ueditor 1.5版本单独调用图片上传如何实现?

    在页面中引入UEditor的核心文件ueditor.config.js和ueditor.all.min.js以及需要使用的语言文件(如zh-cn.js)。

    创建一个容器,用于显示UEditor编辑器。

    在JavaScript中创建一个UEditor实例并配置相关参数。其中,需要设置上传图片的配置项,包括图片上传的接口地址和其他参数。例如:

    在UEditor实例中调用图片上传的方法。例如:

或者,可以直接在UEditor编辑器中点击图片上传按钮进行图片上传操作。在上传成功后,UEditor将自动将上传的图片插入到编辑器中。

注意:图片上传接口需要根据实际情况进行开发,并返回一个符合UEditor要求的JSON格式数据,其中包含上传图片的状态、图片地址等信息。UEditor默认使用POST方式上传图片,如果需要使用其他方式,可以通过配置项进行设置。

ueditor编辑器不能上传图片

Ueditor编辑器图片上传
UEditor的图片上传采用了Flash上传的方式,在功能上支持批量、本地预览和实时进度提示,在界面上支持自定义背景、上传按钮和预览框等视觉元素的样式属性,基本能够满足各种用户的不同上传需求。
由于涉及到了后端开发语言、flash、js和html等各种不同的web元素,图片上传这块的配置和使用相对来说稍显复杂,不过只要你认真看完以下的内容,那一切都不是什么问题了。下面我们仍然以上文中的完整版实例来一步一步完成这个过程。
先来回顾一下完整版部署章节中提到的项目目录结构,如下左图所示。为了更加符合一般网站的具体实际,也为了更清晰地展示整体的路径配置流程,我们先对这个目录做一下小的改动:将ueditor目录下的server文件夹提取出来放置到根目录中的admin文件夹下。调整后的目录结构如下右图所示

首先来看前端部分的文件及其配置。打开dialogs/image文件夹,我们可以发现四个文件:
•callback.js:本上传模块支持的所有回调函数,你可以按需选用其中的内容。对于不需要做二次开发的你说,可以放心地直接删除。
•image.html:图片上传对话框的主体文件。前端的配置和修改基本在此处完成。
•imageUploader.swf:Flash上传文件。
•tangram.js:百度前端框架tangram封装的flash操作模块。一般无需修改。
打开image.html文件,找到.swf.create()方法,有关图片上传的大部分配置都在这里进行。这其中的绝大部分参数相信你对着注释都能很容易明白意思,下面将挑选几个需要稍微解释的参数进行讲解:
首先是backgroundUrl、listBackgroundUrl和buttonUrl这三个参数。UEditor为了让上传flash的界面能够满足各种不同的网站风格,预留出了这三个参数让你可以自己定义上传框的背景、图片预览框的背景和上传按钮的背景,默认留空情况下就是同学们看到的样式。
其次是compressSide和compressLength这两个参数。前者规定了上传图片等比压缩的基准边,后者规定了前者定义的基准边的最大边长,并以该值为基准进行等比缩放。此处的值设置是通过读取配置文件中的maxImageSideLength值来进行,嫌麻烦的可以直接设置数值即可。
第三个是url参数。这个参数设置了图片上传后台处理程序的路径。以当前项目示例来说,此处的url值应该是“../../../admin/server/upload/up.php”。
第四个要介绍的参数是ext。这个参数允许让你自己定义需要向后端post的参数。只要书写符合我们demo中的格式,后台就可以直接像接收一个普通的表单项一样的方式来接收对应的自定义值。
最后一个需要要介绍的参数是fileType。它在前端限定了文件选择框中能够显示的文件类型,如果需要上传其他非图片格式的文件,你只要修改对应的扩展名即可。
前端部分的配置暂时结束,下面来看后台处理程序中的配置。打开admin/server/upload/文件夹,在up.php文件中,我们可以发现需要配置的参数有以下三个uploadPath, fileType 和 fileSize。有你后两个参数的存在表示疑问,认为前端已经通过Flash*了文件大小和文件类型,此处不需要再进行*。这种认识其实是不对的,有经验的hacker们完全可以通过自己构造提交表单来绕开前端Flash的各种*,直接上传文件到我们的服务器。
我们重点来看uploadPath这个参数。默认状态下,这个参数的配置会在up.php文件所在目录的父目录中创建一个uploadfiles文件夹,并将图片保存在这个文件夹中。完成图片的保存之后需要返回的字符串是一个纯粹的json字符串,形如
{'url':'../uploadfiles/23123213.jpg','title':'描述','state':'SUCCESS'}

此处需要说明的一点是url这个参数。可以看到,当前这个url参数中携带了“../”这样的相对路径,这种表示方式由于具有明显的上下文含义,因此不大适合于用来进行跨页面的数据传递。如果非要使用这种路径传递方式,那么必须在图片显示页面进行地址修正。 一般来说,比较正确的做法是在返回给客户端之前将相对路径转换成带域名的绝对路径,这一步操作一般应该结合后台的网站根目录配置来完成。UEditor不希望了解具体的服务器端配置,因此在此处进行了另外一种处理:去掉所有./以及../等相对路径的字符串,只返回从uploadfiles开始的图片路径,如“uploadfiles/23123213.jpg”, 然后通过在editor_config.js中配置imagePath这个参数来修正图片的真实地址。imagePath代表的含义是uploadfiles文件夹所在的文件夹地址。以当前实例项目为例,uploadfiles位于server目录底下,所以imagePath的值应该设置为“admin/server/”。此处之所以从根目录开始,原因同完整版部署时候说的一样,是因为editor_config.js被index.php导入,所以其真实路径就是根目录。 另外一个state参数则是由后台的具体逻辑来确定,其值可自定义,但如果上传成功,必须返回“SUCCESS”字符串,其他状态将直接在预览框中展示。
到此为止,图片上传所需要的所有配置和修改就已经完成了。在地址栏中输入地址,体验下UEditor提供的强大的图片上传功能吧!
PS:JSP版的图片上传采用了commons-fileupload包,请先下载commons-fileupload-1.2.2.jar,并将其加入到项目中的WEB-INF/lib/目录下方可正常使用追问忘了说明,下载的ueditor编辑器1.4.3是ASP GBK版本的,你上面所说的很多文件都没有。

ueditor编辑器不能上传图片

Ueditor编辑器图片上传
UEditor的图片上传采用了Flash上传的方式,在功能上支持批量、本地预览和实时进度提示,在界面上支持自定义背景、上传按钮和预览框等视觉元素的样式属性,基本能够满足各种用户的不同上传需求。
由于涉及到了后端开发语言、flash、js和html等各种不同的web元素,图片上传这块的配置和使用相对来说稍显复杂,不过只要你认真看完以下的内容,那一切都不是什么问题了。下面我们仍然以上文中的完整版实例来一步一步完成这个过程。
先来回顾一下完整版部署章节中提到的项目目录结构,如下左图所示。为了更加符合一般网站的具体实际,也为了更清晰地展示整体的路径配置流程,我们先对这个目录做一下小的改动:将ueditor目录下的server文件夹提取出来放置到根目录中的admin文件夹下。调整后的目录结构如下右图所示

首先来看前端部分的文件及其配置。打开dialogs/image文件夹,我们可以发现四个文件:
•callback.js:本上传模块支持的所有回调函数,你可以按需选用其中的内容。对于不需要做二次开发的你说,可以放心地直接删除。
•image.html:图片上传对话框的主体文件。前端的配置和修改基本在此处完成。
•imageUploader.swf:Flash上传文件。
•tangram.js:百度前端框架tangram封装的flash操作模块。一般无需修改。
打开image.html文件,找到.swf.create()方法,有关图片上传的大部分配置都在这里进行。这其中的绝大部分参数相信你对着注释都能很容易明白意思,下面将挑选几个需要稍微解释的参数进行讲解:
首先是backgroundUrl、listBackgroundUrl和buttonUrl这三个参数。UEditor为了让上传flash的界面能够满足各种不同的网站风格,预留出了这三个参数让你可以自己定义上传框的背景、图片预览框的背景和上传按钮的背景,默认留空情况下就是同学们看到的样式。
其次是compressSide和compressLength这两个参数。前者规定了上传图片等比压缩的基准边,后者规定了前者定义的基准边的最大边长,并以该值为基准进行等比缩放。此处的值设置是通过读取配置文件中的maxImageSideLength值来进行,嫌麻烦的可以直接设置数值即可。
第三个是url参数。这个参数设置了图片上传后台处理程序的路径。以当前项目示例来说,此处的url值应该是“../../../admin/server/upload/up.php”。
第四个要介绍的参数是ext。这个参数允许让你自己定义需要向后端post的参数。只要书写符合我们demo中的格式,后台就可以直接像接收一个普通的表单项一样的方式来接收对应的自定义值。
最后一个需要要介绍的参数是fileType。它在前端限定了文件选择框中能够显示的文件类型,如果需要上传其他非图片格式的文件,你只要修改对应的扩展名即可。
前端部分的配置暂时结束,下面来看后台处理程序中的配置。打开admin/server/upload/文件夹,在up.php文件中,我们可以发现需要配置的参数有以下三个uploadPath, fileType 和 fileSize。有你后两个参数的存在表示疑问,认为前端已经通过Flash*了文件大小和文件类型,此处不需要再进行*。这种认识其实是不对的,有经验的hacker们完全可以通过自己构造提交表单来绕开前端Flash的各种*,直接上传文件到我们的服务器。
我们重点来看uploadPath这个参数。默认状态下,这个参数的配置会在up.php文件所在目录的父目录中创建一个uploadfiles文件夹,并将图片保存在这个文件夹中。完成图片的保存之后需要返回的字符串是一个纯粹的json字符串,形如
{'url':'../uploadfiles/23123213.jpg','title':'描述','state':'SUCCESS'}

此处需要说明的一点是url这个参数。可以看到,当前这个url参数中携带了“../”这样的相对路径,这种表示方式由于具有明显的上下文含义,因此不大适合于用来进行跨页面的数据传递。如果非要使用这种路径传递方式,那么必须在图片显示页面进行地址修正。 一般来说,比较正确的做法是在返回给客户端之前将相对路径转换成带域名的绝对路径,这一步操作一般应该结合后台的网站根目录配置来完成。UEditor不希望了解具体的服务器端配置,因此在此处进行了另外一种处理:去掉所有./以及../等相对路径的字符串,只返回从uploadfiles开始的图片路径,如“uploadfiles/23123213.jpg”, 然后通过在editor_config.js中配置imagePath这个参数来修正图片的真实地址。imagePath代表的含义是uploadfiles文件夹所在的文件夹地址。以当前实例项目为例,uploadfiles位于server目录底下,所以imagePath的值应该设置为“admin/server/”。此处之所以从根目录开始,原因同完整版部署时候说的一样,是因为editor_config.js被index.php导入,所以其真实路径就是根目录。 另外一个state参数则是由后台的具体逻辑来确定,其值可自定义,但如果上传成功,必须返回“SUCCESS”字符串,其他状态将直接在预览框中展示。
到此为止,图片上传所需要的所有配置和修改就已经完成了。在地址栏中输入地址,体验下UEditor提供的强大的图片上传功能吧!
PS:JSP版的图片上传采用了commons-fileupload包,请先下载commons-fileupload-1.2.2.jar,并将其加入到项目中的WEB-INF/lib/目录下方可正常使用追问忘了说明,下载的ueditor编辑器1.4.3是ASP GBK版本的,你上面所说的很多文件都没有。

ueditor富文本编辑器上传图片怎么配置?

1. 前端配置项

前端需要配置 serverUrl 参数,修改 ueditor.config.js 里的 serverUrl 参数,改成服务器端路径,参考:URL + 'php/controller.php'

2. 后端配置项

后端配置项在 php/config.json 里配置,不同的上传有各自的配置项。

修改上传图片路径的参数是 imagePathFormat ,改成你的图片文件夹路径即可。

ueditor 怎么自定义上传文件的路径啊?求指导,,最好是有源码

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。

开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。

百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本。

优点

1、体积小巧,性能优良,使用简单

2、分层架构,方便定制与扩展

3、满足不同层次用户需求,更加适合团队开发

4、丰富完善的中文文档

5、多个浏览器支持:Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome

6、更好的使用体验

7、拥有专业QA团队持续支持,已应用在百度各大产品线上

使用步骤

1.添加jar包 jar包位置:文件根目录下jsp的lib文件夹下,把jar包复制到web-inf下的lib文件夹下buildpath

2.修改config.js中的URL路径,修改为UEidtor插件在自己工程中的正确根路径

3.在jsp文件中先引入配置文件config.js然后再源码文件all.js(注意顺序)

4.加载容器和实例化容器

1.修改config.js配置文件URL为插件根目录,一般是绝对路径。

2.修改config.json中上传图片配置项中的访问路径前缀为项目名称,根据情况修改上传文件路径和访问路径。

配置正确之后UEditor有上传功能帮助我们上传图片。

但是上传路径会在项目部署的临时文件夹下。 tomcat取消部署后,上传文件就会和项目部署文件一起被删除

3.实现把图片上传到自定义路径  

在处理上传后的文件名称的时候注意不要出现中文  

要不然还需要做处理才能正确读取文件!

4.(1)首先在jsp中覆盖UEidtor获取路径的方法

//覆盖UEditor中获取路径的方法

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl = function(action) {

//判断路径 这里是config.json 中设置执行上传的action名称

if (action == 'uploadimage') {

return 'http://localhost:8080/maven-web/uploadImage.do';

} else if (action == 'uploadvideo') {

return '';

} else {

return this._bkGetActionUrl.call(this, action);

}

}

(2)首先在springmvc配置文件中配置

<!-- 上传配置 -->

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">

<property name="defaultEncoding" value="UTF-8"></property>

</bean>

在controller中定义上传和读取文件的方法

/**

* SpringMVC 用的是 的MultipartFile来进行文件上传

* 这里用@RequestParam()来指定上传文件为MultipartFile

* @throws IOException

*/

@RequestMapping("uploadImage")

@ResponseBody              //这里upfile是config.json中图片提交的表单名称

public Map<String,String> uploadImage(@RequestParam("upfile") CommonsMultipartFile upfile,HttpServletRequest request) throws IOException{

//文件原名称

String fileName=upfile.getOriginalFilename();

//为了避免重复简单处理

String nowName=new Date().getTime()+"_" + fileName;

if(!upimage.isEmpty()){

//上传位置路径

String path0 = "D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+nowName;

//按照路径新建文件

File newFile = new File(path0);

//复制

FileCopyUtils.copy(upimage.getBytes(), newFile);

}

//返回结果信息(UEditor需要)

Map<String,String> map = new HashMap<String,String >();

//是否上传成功

map.put("state", "SUCCESS");

//现在文件名称

map.put("title", nowName);

//文件原名称

map.put("original", fileName);

//文件类型 .+后缀名

map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));

//文件路径

map.put("url", "/"+nowName+"/getImage.do");

//文件大小(字节数)

map.put("size", upfile.getSize()+"");

return map;

}

/**

* 读取文件

*/

@RequestMapping("{imgName}/getImage")

public void readImg(@PathVariable("imgName") String imgName, HttpServletResponse response)

throws Exception {

//设置文件的返回类型

response.setContentType("image/*");

//文件路径(windows下是\\,linux下是//,都必须是绝对路径)

String imgPath="D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+imgName;

//java中用File类来表示一个文件

File image = new File(imgPath);

//测试这个文件路径是否存在(也就是这个文件是否存在)

if (!image.exists()) {

return;

}

//FileUtils.readFileToByteArray(File file)把一个文件转换成字节数组返回

response.getOutputStream().write(FileUtils.readFileToByteArray(image));

//java在使用流时,都会有一个缓冲区,按一种它认为比较高效的方法来发数据:

//把要发的数据先放到缓冲区,缓冲区放满以后再一次性发过去,而不是分开一次一次地发.

//而flush()表示强制将缓冲区中的数据发送出去,不必等到缓冲区满.

response.getOutputStream().flush();

response.getOutputStream().close();

}

91汽车资讯网还为您提供以下相关内容希望对您有帮助:

ueditor 1.5版本单独调用图片上传如何实现?

在UEditor实例中调用图片上传的方法。例如:或者,可以直接在UEditor编辑器中点击图片上传按钮进行图片上传操作。在上传成功后,UEditor将自动将上传的图片插入到编辑器中。注意:图片上传接口需要根据实际情况进行开发,并返回一个...

请问:百度Ueditor编辑器为什么不能上传图片啊?在ASP中,请求高手指教...

Ueditor编辑器图片上传 UEditor的图片上传采用了Flash上传的方式,在功能上支持批量、本地预览和实时进度提示,在界面上支持自定义背景、上传按钮和预览框等视觉元素的样式属性,基本能够满足各种用户的不同上传需求。由于涉及到了...

ueditor 怎么自定义上传文件的路径啊?求指导,,最好是有源码

2.修改config.json中上传图片配置项中的访问路径前缀为项目名称,根据情况修改上传文件路径和访问路径。配置正确之后UEditor有上传功能帮助我们上传图片。但是上传路径会在项目部署的临时文件夹下。 tomcat取消部署后,上传文件就会...

ueditor富文本编辑器上传图片怎么配置?

1. 前端配置项 前端需要配置 serverUrl 参数,修改 ueditor.config.js 里的 serverUrl 参数,改成服务器端路径,参考:URL + 'php/controller.php'2. 后端配置项 后端配置项在 php/config.json 里配置,不同的上传有各...

百度编辑器ueditor更改图片和附件上传路径的方法

步骤1.首先修改ueditor.config.js文件,如下图,红色框即为修改后的效果。说明:1.imagePath:是用来显示图片上传成功后,编辑器里图片的预览效果。如果此路径出错,那么在编辑器中就无法预览到我们刚上传图片。可以查看HTML...

ueditor 怎么上传swf

window.UEDITOR_CONFIG.imageUrl="{:U('Upload/uploadimg')}"; //图片上传提交地址 window.UEDITOR_CONFIG.imagePath='__ROOT__/Upload/images/ueditor/';//编辑器调用图片的地址。

在jsp中怎么使用Ueditor编辑器

您好,关于JSP中Ueditor的使用经验:1、首先去官网下载Ueditor,选择UTF-8版本。2、在项目工程里面导入,新建一个Ueditor的文件夹,把解压之后的全部东西放进去。3、新建一个JSP页面,并在页面上引用Ueditor的JS文件,路径自己...

百度编辑器ueditor asp版怎么用

1、从官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:_examples:编辑器完整版的示例页面 dialogs:弹出对话框对应的资源和JS文件 themes:样式图片和样式文件 php/jsp/.net:涉及到服务器端操作的...

.net下如何使用ueditor上传图片,上传图片成功后,在编辑器内显示红叉...

点编辑器左上角的html进入源码模式,查看图片路径,与实际上传的路径 然后修改config.js 与其有直接关系 的是URL 和 imagePath这两个参数 imagePath默认的是"net/",返回的图片路径是URL下的net文件夹 你检查下这两个路径...

百度ueditor能不能上传pdf

可以上传的,如果不能上传,在js代码里设置下;一般百度官方下载的ueditor编辑器,默认都是带了PDF上传功能的,参考如下官方代码://默认值:[".png", ".jpg", ".jpeg", ".gif", ".bmp",".flv", ".swf", "....

Top