Ueditor文件上传问题
Posted 梁大师
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ueditor文件上传问题相关的知识，希望对你有一定的参考价值。
我们在做一些网站是会遇到，要有上传文件一类的事情。
我发现百度的富文本编辑器带上传功能，但是没有办法给后台传递我们要的参数。
先在ueditor.all.js中找到， me.execCommand(‘inserthtml‘, html);
在它下面添加： me.fireEvent(‘afterUpfile‘,filelist);
此时，我们就可以在前台监听上传了。
ps：filelist你联系上文，我们可以知道就是我们要的文件信息数组，有后台返回的。
在前台添加，uploadEditor为编辑器对象实体。
1 uploadEditor.ready(function() { 2 uploadEditor.addListener("afterUpfile", _afterUpfile); 3 });
_afterUpfile，为监听函数，就是我们自己的事物了。
如：
1 // 监听函数 2 function _afterUpfile(t, result) { 3 var fileHtml = ‘‘; 4 var str; 5 for (var i in result) { 6 NAME[i] = result[i].title; 7 URL[i] = result[i].url; 8 str = ‘文件名: ‘ + result[i].title + ‘<br/>‘; 9 fileHtml += ‘<li>‘ + str + ‘</li>‘; 10 } 11 document.getElementById(‘fileList‘).innerHTML = fileHtml; 12 }
下面是一个完整的测试页面哦。
1 <!doctype html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>外部调用UEditor的多图上传和附件上传</title> 7 <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> 8 <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script> 9 <style> 10 ul { 11 display: inline-block; 12 width: 100%; 13 margin: 0; 14 padding: 0; 15 } 16 17 li { 18 list-style-type: none; 19 margin: 5px; 20 padding: 0; 21 } 22 </style> 23 </head> 24 25 <body> 26 <h1>外部调用UEditor的多图上传和附件上传示例</h1> 27 <button type="button" id="j_upload_file_btn">附件上传</button> 28 <ul id="upload_file_wrap"></ul> 29 <!-- 加载编辑器的容器 --> 30 <textarea id="uploadEditor" style="display: none;"></textarea> 31 <!-- 使用ue --> 32 <script type="text/javascript"> 33 // 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。 34 var uploadEditor = UE.getEditor("uploadEditor", { 35 isShow: false, 36 focus: false, 37 enableAutoSave: false, 38 autoSyncData: false, 39 autoFloatEnabled: false, 40 wordCount: false, 41 sourceEditor: null, 42 scaleEnabled: true, 43 toolbars: [ 44 ["insertimage", "attachment"] 45 ] 46 }); 47 48 // 监听多图上传和上传附件组件的插入动作 49 uploadEditor.ready(function() { 50 uploadEditor.addListener("afterUpfile", function(t, result) { 51 alert(111); 52 var fileHtml = ‘‘; 53 for (var i in result) { 54 fileHtml += ‘<li><a href="‘ + result[i].url + ‘" target="_blank">‘ + result[i].url + ‘</a></li>‘; 55 } 56 document.getElementById(‘upload_file_wrap‘).innerHTML = fileHtml; 57 }); 58 }); 59 60 document.getElementById(‘j_upload_file_btn‘).onclick = function() { 61 var dialog = uploadEditor.getDialog("attachment"); 62 dialog.title = ‘附件上传‘; 63 dialog.render(); 64 dialog.open(); 65 }; 66 67 68 69 // 附件上传 70 function _afterUpfile(t, result) { 71 var fileHtml = ‘‘; 72 for (var i in result) { 73 fileHtml += ‘<li><a href="‘ + result[i].url + ‘" target="_blank">‘ + result[i].url + ‘</a></li>‘; 74 } 75 document.getElementById(‘upload_file_wrap‘).innerHTML = fileHtml; 76 } 77 </script> 78 </body> 79 80 </html>
这是在网上找的，源地址以找不到了。
但是在这里要感谢这些分享他们代码和心得的coders。
以上是关于Ueditor文件上传问题的主要内容，如果未能解决你的问题，请参考以下文章
百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题，点击上传图片弹窗打开慢问题