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

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

先在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彻底卸载

    -----本文摘自:http://www.heiqu.com/show-64764-1.html 1.控制面板里的增加删除程序内进行删除 2.删除MySQL文件夹下的my.ini文件,如果备份好,可以 ...

  2. LigerUI一个前台框架增、删、改asp.net代码

    LigerUI一个前台框架增.删.改asp.net代码的实现   先上代码:前台代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  3. WCF的简单

    WCF的简单 WCF的学习之旅 一.WCF的简单介绍  Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows ...

  4. Node填坑教程——过滤器

    所谓“过滤器”,只是一个概念,可以理解是一个路由,也可以理解为一个中间件.原理非常简单,就是利用匹配规则,让其有限匹配在正常的路由前面处理就行了. 比如有如下路由 app.get('/', funct ...

  5. Linux系统编程：dup2()重定向

    对于Dup2 的理解: 源代码: #include <unistd.h> #include <stdio.h> #include <stdlib.h> #inclu ...

  6. Coursera台大机器学习基础课程1

    Coursera台大机器学习基础课程学习笔记 -- 1 最近在跟台大的这个课程,觉得不错,想把学习笔记发出来跟大家分享下,有错误希望大家指正. 一 机器学习是什么? 感觉和 Tom M. Mitche ...

  7. String和StringBuilder的使用

    如果有理解错误的地方希望有朋友能指出,谢谢!   String是特殊的引用类型的,更像值类型,StringBuilder的是规规矩矩引用类型的.   首先看这样的对比图,Equals()方法是判断两个 ...

  8. 扩展Session机制

    分布式缓存扩展Session机制   为什么要把Session放在缓存中 Session是我们常用的状态保持的对象,它通常会生成一个唯一的SessionId以Cookie的方式存在浏览器端,而Sess ...

  9. Block formatting context

    不会JS中的OOP,你也太菜了吧!(第一篇)   一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合 ...

  10. nc 简单的使用

    非常强大的网络工具nc netcat 下面自己总结了它的几种常用用法(参考了它的man): 1.聊天 ClientA: nc - ClientB: nc A'sIP 1234 2.数据传输 Clien ...