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

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

先在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. Javascript技巧实例精选(1)—鼠标选择动态改变网页背景颜色

    >>点击这里下载html源文件代码<< 采用Javascript实现,用鼠标点击相应颜色,动态改变网页背景颜色 这是截图 相应的Javascript源代码为: var hex ...

  2. ListNode线性表

    不常用,可以看一下实现原理 namespace UnilateralismChainTable { // 结点类 public class ListNode { public ListNode(int ...

  3. Scala中的语言特性是如何实现的(3) -- Trait

    我的新博客地址:http://cuipengfei.me/blog/2013/10/13/scala-trait/ 我在Coursera上跟了一门叫做Functional Programming Pr ...

  4. .NET里的行为驱动开发

    BDD (Given - When - then) Ruby Cucumber, Java FitNesse , Python RoboFramework, C# specflow nspec .NE ...

  5. Web Builder

    Web Builder http://www.doc88.com/p-1748774598960.html 初次接触Infopath,我就被它的强大的功能,灵活的表单制作方式,全面对Web Servi ...

  6. c#中如何跨线程调用windows窗体控件？

    我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍.首先来看传统方法: public partial c ...

  7. Linux下获取硬盘使用情况

    Linux下获取硬盘使用情况[总结] 1.前言 在嵌入式设备中,硬盘空间非常有限,在涉及到经常写日志的进程时候,需要考虑日志的大小和删除,不然很快就硬盘写满,导致日志程序崩溃.为了捕获硬盘写满的异常场 ...

  8. CMStepCounter Class Refernce

    CMStepCounter Class Refernce https://developer.apple.com/library/ios/documentation/CoreMotion/Refere ...

  9. Object-c学习之路八（NSArray(数组)遍历和排序）

    今天学习了NSArray的遍历和排序,现在在这里做一下总结: 遍历现在实现了四中方法: 排序大概有三中方法:(代码中都有注释) 关于对象的排序还是以Student和Book为例 每个Student持有 ...

  10. 支付宝移动支付开发详细教程服务端采用.net mvc webapi（C#）

    转自:http://www.kwstu.com/ArticleView/netmvc_201511132005431321 最近开发手机app需要实现移动支付功能,由于考虑支付安全将支付宝生成签名写到 ...