KindEditor加入附件上传功能

wanghailiang333

浏览: 199137 次
性别:
来自: 广西

最近访客更多访客>>

ganglianhuo

Jerry__xie

dagger9527

bobboy007

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

这是别人给出的方法：http://www.cnblogs.com/baiyuntian/archive/2011/11/07/2239475.html

我就是依照此方法来加入附件上传功能的

但在实现的时候出现了问题：选择本地文件上传，显示文件上传成功，但不会自动返回编辑区，并显示文件下载链接。

后边查看源码发现问题的所在

原来代码：kindeditor.js中的KE.plugin['accessory']代码部分

exec: function(id) {
            KE.util.select(id);
            var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
            var type = KE.$('type', dialogDoc).value;
            if (!this.check(id)) return false;
            if (type == 1) {
                //没有调用insert操作
                KE.$('editorId', dialogDoc).value = id; 
                dialogDoc.uploadForm.submit();
                return false;
            } else {
                var url = KE.$('url', dialogDoc).value;
                var title = KE.$('imgTitle', dialogDoc).value;
                this.insert(id, url, title, ext);
            }
        }

可以看到在type==1（上传本地文件）的时候，并没有调用任何处理操作（如调用insert），仅仅是做了一个提交操作。

我对这段代码进行了修改：

exec: function(id) {
            //----
            var self = this;
            //----
            KE.util.select(id);
            var dialogDoc = KE.util.getIframeDoc(KE.g[id].dialog);
            var type = KE.$('type', dialogDoc).value;
            if (!this.check(id)) return false;
            if (type == 1) {
                KE.$('editorId', dialogDoc).value = id;
                
                ///------------
                var uploadIframe = KE.$('uploadIframe', dialogDoc);   //需要有个iframe
                var onloadFunc = function() {
    				KE.event.remove(uploadIframe, 'load', onloadFunc);
    				KE.util.hideLoadingPage(id);
    				var uploadDoc = KE.util.getIframeDoc(uploadIframe);
    				var data = '';
    				try {
    					data = KE.util.parseJson(uploadDoc.body.innerHTML);
    				} catch(e) {
    					alert(KE.lang.invalidJson);
    				}
    				if (typeof data === 'object' && 'error' in data) {
    					if (data.error === 0) {
    						var url = KE.format.getUrl(data.url, 'absolute');
    						self.insert(id, url, data.title , "");
    					} else {
    						alert(data.message);
    						return false;
    					}
    				}
    			};
                KE.event.add(uploadIframe, 'load', onloadFunc);
                //---------------------------
                
                dialogDoc.uploadForm.submit();
                return;
            } else {
                var url = KE.$('url', dialogDoc).value;
                var title = KE.$('imgTitle', dialogDoc).value;
                this.insert(id, url, title, ext);
            }
        }

被注释包围的区域就是我添加的代码，这样可以完成类似图片上传的功能，并能在编辑区显示上传的文件

注意：这里的返回值是Json格式

//返回正常
{
"error" : 0
"url" : ...
"title" :...
}

//返回错误
{
"error" : 1
"message" :　...
}

此处还要修改博客中提到的accessory.html文件

修改如下：

……
<body>
<!-- 加入name为uploadIframe的iframe -->
<iframe name="uploadIframe" id="uploadIframe" style="display:none;"></iframe>

<!-- target为uploadIframe -->
<form name="uploadForm" method="post" enctype="multipart/form-data" action="../../upload_file_json.php" target="uploadIframe">

……

这样修改以后就可以在上传本地文件之后，跳转回编辑区，并显示要下载的文件链接。

分享到：