我们在做一些网站是会遇到，要有上传文件一类的事情。

我发现百度的富文本编辑器带上传功能，但是没有办法给后台传递我们要的参数。

先在ueditor.all.js中找到， me.execCommand('insertHtml', html);

在它下面添加： me.fireEvent('afterUpfile',filelist);

此时，我们就可以在前台监听上传了。

ps：filelist你联系上文，我们可以知道就是我们要的文件信息数组，有后台返回的。

在前台添加，uploadEditor为编辑器对象实体。

 uploadEditor.ready(function() {

             uploadEditor.addListener("afterUpfile", _afterUpfile);

         });

_afterUpfile，为监听函数，就是我们自己的事物了。

如：

  // 监听函数

         function _afterUpfile(t, result) {

             var fileHtml = '';

             var str;

             for (var i in result) {

                 NAME[i] = result[i].title;

                 URL[i] = result[i].url;

                 str = '文件名:  ' + result[i].title + '<br/>';

                 fileHtml += '<li>' + str + '</li>';

             }

             document.getElementById('fileList').innerHTML = fileHtml;

         }

下面是一个完整的测试页面哦。

 <!doctype html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>外部调用UEditor的多图上传和附件上传</title>

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

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

     <style>

     ul {

         display: inline-block;

         width: 100%;

         margin: 0;

         padding: 0;

     }

     li {

         list-style-type: none;

         margin: 5px;

         padding: 0;

     }

     </style>

 </head>

 <body>

     <h1>外部调用UEditor的多图上传和附件上传示例</h1>

     <button type="button" id="j_upload_file_btn">附件上传</button>

     <ul id="upload_file_wrap"></ul>

     <!-- 加载编辑器的容器 -->

     <textarea id="uploadEditor" style="display: none;"></textarea>

     <!-- 使用ue -->

     <script type="text/javascript">

     // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。

     var uploadEditor = UE.getEditor("uploadEditor", {

         isShow: false,

         focus: false,

         enableAutoSave: false,

         autoSyncData: false,

         autoFloatEnabled: false,

         wordCount: false,

         sourceEditor: null,

         scaleEnabled: true,

         toolbars: [

             ["insertimage", "attachment"]

         ]

     });

     // 监听多图上传和上传附件组件的插入动作

     uploadEditor.ready(function() {

         uploadEditor.addListener("afterUpfile",  function(t, result) {

                 alert(111);

                 var fileHtml = '';

                 for (var i in result) {

                     fileHtml += '<li><a href="' + result[i].url + '" target="_blank">' + result[i].url + '</a></li>';

                 }

                 document.getElementById('upload_file_wrap').innerHTML = fileHtml;

             });

     });

     document.getElementById('j_upload_file_btn').onclick = function() {

         var dialog = uploadEditor.getDialog("attachment");

         dialog.title = '附件上传';

         dialog.render();

         dialog.open();

     };

     // 附件上传

     function _afterUpfile(t, result) {

         var fileHtml = '';

         for (var i in result) {

             fileHtml += '<li><a href="' + result[i].url + '" target="_blank">' + result[i].url + '</a></li>';

         }

         document.getElementById('upload_file_wrap').innerHTML = fileHtml;

     }

     </script>

 </body>

 </html>

这是在网上找的，源地址以找不到了。

但是在这里要感谢这些分享他们代码和心得的coders。

Ueditor文件上传问题的更多相关文章

  1. ueditor 文件上传的分析和总结

    正式开始之前,先写两个常用又容易被我忘掉的文件和流相互转化的方法. 1,文件转流 FileStream fs = new FileStream(filename,FileMode.Open,FileA ...

  2. 将Ueditor文件上传至OSS

    前人已经将ueditor集成了oss,本次是作为记录 1:点击到下载页面 下载并按照文档安装 2:将 com.zip(在UEditor-for-aliyun-OSS-master\ueditor\sr ...

  3. 百度UEditor图片上传或文件上传路径自定义

    最近在项目中使用到百度UEditor的图片以及文件上传功能,但在上传的时候路径总是按照预设规则来自动生成,不方便一些特殊文件的维护.于是开始查看文档和源代码,其实操作还是比较简单的,具体如下: 1.百 ...

  4. UEditor独立图片、文件上传模块

    百度的UEditor编辑器的强大之处不用多说,但是有时候我们只想用他的文件.图片上传模块,不想把这个编辑器加载出来,话不多说,直接上实现代码: 引用文件: <script src="~ ...

  5. 百度开源富文本编辑器 UEditor配置：图片上传和文件上传独立使用方法

    使用UEditor编辑器自带的插件实现图片上传和文件上传功能,这里通过配置UEditor单独使用其内置的第三方插件swfupload来实现图片和文件的上传,通过对UEditor配置轻松实现图片批量上传 ...

  6. UEditor Flash文件上传-crossdomain.xml文件配置

    在使用UEditor富文本时,如果客户端的浏览器是低版本浏览器,如IE7.IE8等,UEditor的文件上传方式将会使用flash方式上传而不是html5,而flash在跨域时唯一的限制策略就是cro ...

  7. Ueditor 前后端分离实现文件上传到独立服务器

    关于Ueditor 前后端分离实现文件上传到独立服务器,在网上搜索确实遇到大坑,不过还好遇到了 虚若影 最终实现了,在此感谢!虚若影的原文博客网址:http://www.cnblogs.com/hpn ...

  8. UEditor编辑器两个版本任意文件上传漏洞分析

    0x01 前言 UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量.可定制.用户体验优秀等特点 ,被广大WEB应用程序所使用:本次爆出的高危漏洞属于.NET版本,其它的 ...

  9. 在 .NET Core项目中使用UEditor图片、文件上传服务

    在.NET Framework中使用UEditor时,只需要将UEditor提供的后端服务,部署为一个子程序,即可直接使用文件上传相关的服务,但是UEditor官方并未提供.Net Core的项目,并 ...

随机推荐

  1. mysql通过字段注释查找字段名称

    原文:mysql通过字段注释查找字段名称 有时候表的字段太多,只是大致记得表的注释,想通过字段注释查找字段名称,可以用如下语句: SELECT COLUMN_NAME,column_comment F ...

  2. ios中mvc的FormsAuthentication.SetAuthCookie(cookieUserName, false)失败

    如果楼主使用.net开发,要注意FormsAuthentication.SetAuthCookie 方法的使用会导致ios出现该问题.因为这个方法在ios设备上是把票据加入到url中,导致url和你的 ...

  3. C# 4.0 Parallel

    C# 4.0 并行计算部分   沿用微软的写法,System.Threading.Tasks.::.Parallel类,提供对并行循环和区域的支持. 我们会用到的方法有For,ForEach,Invo ...

  4. iOS基础 - CALayer

    一.CALayer简介 Core Animation是跨平台的,支持iOS环境和Mac OS X环境 凡是支持跨平台的框架,都不能直接使用UIKit框架,因为UIKit框架只能应用在iOS而不能用于M ...

  5. TCP应用

    .Net 并行计算 ----并行任务 本文作为 .Net 并行计算 的第二篇 名词解释 任务并行是指一个或者多个独立的任务同时运行.任务并行类似于多线程或者ThreadPool 工作项.但是抽象的级别 ...

  6. IOS内存泄漏

    1. . - (void)viewDidLoad { [superviewDidLoad]; self.view.frame=CGRectMake(, , , ); NSArray *title1=[ ...

  7. SVN merge

    SVN merge的主干,分支的相互合并操作   SVN merge的主干,分支的相互合并操作 本文只研究了 在本地如何进行主干,分支的相互合并 的操作:从主干到分支,从分支到主干. 本地客户端工具是 ...

  8. C语言可变参数函数的编写

    1. 引言 C语言我们接触的第一个库函数是 printf(“hello,world!”);其参数个数为1个. 然后,我们会接触到诸如: printf(“a=%d,b=%s,c=%c”,a,b,c);此 ...

  9. java判断字符串是否为乱码

    项目中有一个功能 在IE中GET方式提交会产生乱码 但有两个入口都会走这同一段代码 固不能直接转码,所以要进行判断传过来的该值是不是乱码 可用以下方式验证: java.nio.charset.Char ...

  10. 编写类String 的构造函数、析构函数和赋值函数

    编写类String 的构造函数.析构函数和赋值函数,已知类String 的原型为:class String{public:String(const char *str = NULL); // 普通构造 ...