如何在CKEditor中显示上传进度？ [英] How to show uploading progress in CKEditor?

问题描述

我正在添加一个允许用户上传视频并将视频显示到CKEditor的插件。文件的大小可能很大，所以我想显示上传进度。

I'm adding a plugin that allow user to upload and display video to CKEditor. The file's size may be big so I'd like to display the upload progress.

目前我正在使用默认的FileBrowser API来显示上传按钮，但是文档没有提及显示进度。

Currently I'm using the default FileBrowser API to show the upload button, but the document doesn't mention about showing the progress.

我怎样才能实现这一目标？或者我是否需要编写自己的上传插件？

How can I achieve this? Or do I need to write my own upload plugin?

推荐答案

您可以触发事件发射器以检查上传是否正在进行中

You can trigger the event emitter to check if the upload is in progress

使用nodejs上传s3的示例代码

a sample code for s3 upload using nodejs

function s3uploads(filePath, callback){

var localFile = filePath;

    var onlyFileName = localFile.split("/");
    var fname = (onlyFileName[onlyFileName.length - 1]);

    var params = {
        localFile: localFile,

        s3Params: {
            Bucket: "ss3bucket",
            Key: "folder-name/" + fname,
            ACL: 'public-read',
            CacheControl: 'max-age=31536000',
            Expires: new Date || 'Wed Dec 31 2099 16:00:00 GMT-0800 (PST)'
            || 123456789
        }
    };

    var uploader = client.uploadFile(params);
            uploader.on('error', function (err) {
                console.error("unable to upload:", err.stack);
                return callback(err,null)
            });
            uploader.on('progress', function () {
                console.log("progress", uploader.progressMd5Amount,
                    uploader.progressAmount, uploader.progressTotal);
                var percentCal = ((parseInt(uploader.progressAmount) * 100) / parseInt(uploader.progressTotal)).toFixed(2);
                var percent = percentCal.toString();
                return callback(null,{type : 'progress', percent: percent, url : null});
            });
            uploader.on('end', function () {
                console.log("done uploading");

                return callback(null,{type : 'end', percent: '100', url : 'https://s3.us-east-2.amazonaws.com/s3bucket/folder-name/' + fname});

            });
}

并且在要调用此函数的代码块中
您可以在进度状态处于活动状态时使用response.write（），当达到最终状态时，您可以传递res.end（）

And in the code block where you want to call this function you can use response.write() when the progress state is active and when the end state is achieved you can then pass res.end()

s3uploads(fileUrl, function (err, uploadResult) {
                if(err){
                    res.send("error");
                }

                if(uploadResult.type === 'progress'){
                    var html =  "<p>Please wait its uploading to server </p> <p></p>" ;

                    res.write(html);

                } else {
                    fileUrl = uploadResult.url;

                    res.write("<script type='text/javascript'>\
 (function(){var d=document.domain;while (true){try{var A=window.parent.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:\.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();\
 window.parent.CKEDITOR.tools.callFunction('" + CKEcallback + "','" + fileUrl + "', '" + msg + "');\
 </script>");
                    res.end();
                }

            });

这篇关于如何在CKEditor中显示上传进度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！