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文件上传问题

相关文章