码迷,mamicode.com
首页 > Web开发 > 详细

Ueditor文件上传问题

时间:2017-01-11 13:58:47      阅读:395      评论:0      收藏:0      [点我收藏+]

标签:eve   exec   back   百度   基础功   dialog   span   上传文件   button   

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

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

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

标签:eve   exec   back   百度   基础功   dialog   span   上传文件   button   

原文地址:http://www.cnblogs.com/lmaster/p/6273166.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!