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

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

先在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. Delphi的注册表操作

    转帖:Delphi的注册表操作 2009-12-21 11:12:52 分类: Delphi的注册表操作 32位Delphi程序中可利用TRegistry对象来存取注册表文件中的信息.     一.创 ...

  2. asp.net mvc上传图片案例

    1.放在ajax.BeginForm里,不好使,同asp.net 表单中 fileupload控件不支持ajax差不多吧,如果异步的话可以借助jquery.form.js,很方便 2. //上传文件  ...

  3. Binder机制，从Java到C （8. ServiceManager in Native）

    在第三篇 Binder机制,从Java到C (3. ServiceManager in Java) 中,讲到ServiceManager的Stub端在Native,Proxy端在Java.实际上,还要 ...

  4. JS 浏览器检测

    原创博文,转载请注明出处. 如果你现在还是一个JavaScript新手(比如本人,哈哈 ),由于浏览器的兼容问题,很容易写出不兼容的JS代码,这就需要我们对浏览器进行检测. JavaScript Na ...

  5. Shards

    跟我一起云计算(5)——Shards   什么是sharding Sharding的基本思想就要把一个数据库切分成多个部分放到不同的数据库 (server)上,从而缓解单一数据库的性能问题.不太严格的 ...

  6. memcpy的实现

    memcpy的实现看起来貌似比较简单,但是也是有注意的地方! void *memcpy(void *dst, const void *src, size_t size) { //check argum ...

  7. 基本功能的shell

    手把手教你编写一个具有基本功能的shell(已开源) 刚接触Linux时,对shell总有种神秘感:在对shell的工作原理有所了解之后,便尝试着动手写一个shell.下面是一个从最简单的情况开始,一 ...

  8. VMware上安装ubuntu 13.04

    作者:viczzx 出处:http://www.cnblogs.com/zixuan-zhang 欢迎转载,也请保留这段声明.谢谢! 这两天打算在Linux环境下学Python语言,想换个高点的ubu ...

  9. 使用 Entity Framework Code First

    使用 Entity Framework Code First 在家闲着也是闲着,继续写我的[ASP.NET MVC 小牛之路]系列吧.在该系列的上一篇博文中,在显示书本信息列表的时候,我们是在程序代码 ...

  10. linux下面的解压缩文件的命令

    尝试去好好用linux.新手起步.   这边只会提到我用过的.其他相关的以后我用到了我会补充的.如果有错欢迎指正 注:1.c-创建-create 2.v-复杂输出    3.f-文件-file     ...