ueditor自定义上传
Ⅰ ueditor自定义实现文件上传
1、ueditor.config.js文件配置服务器地址：
2、当使用富文本上传文件时，会通过 http://localhost/upload?action=config 取获取配置信息
3、配置信息和上传文件接口地址一样，只是通过action参数来识别：
Ⅱ 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.(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();
}
Ⅲ 请问：百度Ueditor编辑器为什么不能上传图片啊在ASP中，请求高手指教。
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/目录下方可正常使用