summernote上传图片进度条-详细内容

文章内容

2017/9/12 17:34:47,作者: 黄兵

summernote上传图片进度条

在使用summernote上传图片的时候，如何显示上传进度呢？

我们可以使用HTML5 progress bar来做这个进度条，不清楚的可以看一下这篇文章：HTML5 progress元素的样式控制、兼容与实例。

好了，前面介绍那么多，如何实现呢，看下面代码：

HTML

<progress></progress>

<div id="summernote"></div>

// initialise editor

$('#summernote').summernote({
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
});

// send the file

function sendFile(file, editor, welEditable) {
        data = new FormData();
        data.append("file", file);
        $.ajax({
            data: data,
            type: 'POST',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                return myXhr;
            },
            url: root + '/assets/scripts/php/app/uploadEditorImages.php',
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                editor.insertImage(welEditable, url);
            }
        });
}

// update progress bar

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded, max:e.total});
        // reset progress on complete
        if (e.loaded == e.total) {
            $('progress').attr('value','0.0');
        }
    }
}