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

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

先在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. centos6.4搭建apache+mysql+php环境

    最近用php做的项目到了项目部署的时候,服务器为centos6.4系统,为了快捷部署,采用yum安装部署 大部分内容参考博客  http://blog.sina.com.cn/s/blog_c02ed ...

  2. vi/vim多行注释和取消注释

    多行注释: 1. 进入命令行模式,按ctrl + v进入 visual block模式,然后按j, 或者k选中多行,把需要注释的行标记起来 2. 按大写字母I,再插入注释符,例如// 3. 按esc键 ...

  3. BrnShop：自定义插件

    BrnShop开源网上商城第四讲:自定义插件 重要通知:BrnShop企业版NOSQL设计(基于Redis)已经开源!源码内置于最新版的BrnShop中,感兴趣的园友可以去下载来看看.官网地址:www ...

  4. Jqury笔记

    1.  --------------- -var aa = new Array(); aa.push(1); alert(aa[0]); var aa=[];也表示一个数组: ------------ ...

  5. MFC圆角背景移动边角底色毛刺解决方案

    CRect rc; Graphics graphics(pDC->m_hDC); GetClientRect(&rc); CRgn m_rgn; if (m_pBgImage) { gr ...

  6. Vim插件之插件管理器Vundle

    Vim插件之插件管理器Vundle 1.介绍下载 相比Sublime.Text2等现代编辑器,Vim缺乏默认的插件管理器,所有插件的文件都散布在~/.vim下的几个文件夹中,配置Vim的过程, 就是在 ...

  7. C#中几个经常犯的错误总汇

    在我们平常编程中,时间久了有时候会形成一种习惯性的思维方式,形成固有的编程风格,但是有些地方是需要斟酌的,即使是一个很小的错误也可能会导致昂贵的代价,要学会善于总结,从错误中汲取教训,尽量不再犯同样错 ...

  8. 【ios开发】自定义Actionsheet实现时间选择器和省市区选择器

    最近的工程有一个个人资料页面,需要填写生日和地区的信息,需要自己定义个actionsheet. 但是到网上搜了一下都不太合适,只好自己研究研究,重写了一个.共享出来给大家用用,突然发现自己精神很高尚吗 ...

  9. 一个人开发的html整站源码分享网站就这么上线了

    项目我采用了纯静态html+动态搜索的模式,就是说详情页.主页等纯静态页面,仅搜索页面采用数据库访问搜索,搜索结果分为静态和动态,如果输入的关键字是已存在的标签就静态展示,否则就动态展示,这么做的好处 ...

  10. Bootstrap3.0学习第八轮

    Bootstrap3.0学习第八轮(工具Class)   前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/34 ...