JS-wangEditor自定义上传多张图片

阳光穿透心脏的1/2处 2022-05-10 04:33 1311阅读 0赞

wangEditor是一款开源的富文本编辑器，除默认实现，还提供非常多自定义参数，看看如何自定义上传多张图片。

var E = window.wangEditor;
    var editor =new E('#description');
    initEditor(editor);
    
    editor.customConfig.uploadImgServer = 'product/upload';
    editor.customConfig.uploadImgHooks = {
        fail:function (xhr, editor, result) {
            //上传错误时触发
            alert("上传图片失败");
        }
    };
    editor.customConfig.customUploadImg = function(files, insert) {
        var formData = new FormData();
        for(var i = 0;i < files.length;i ++) {
            formData.append("files[" + i + "]", files[i], files[i].name);
        }
        $.ajax({
            url: rootPath + 'product/upload',
            type: "POST",
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success:function(da){
                if(da.errno == 0){
                    for(var j=0;j<da.data.length;j++){
                        insert(da.data[j]);
                    }
                }else{
                    alert(da.msg);
                    return;
                }
            }
        });
    };
    
    // 将图片大小限制为 3M
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 5 张图片
    editor.customConfig.uploadImgMaxLength = 30;
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.create();

通过自定义参数customUploadImg，重写上传图片逻辑，上传成功后返回图片地址，再添加到富文本编辑框中。

发表评论取消回复

表情：

评论列表（有 0 条评论，1311人围观）

还没有评论，来说两句吧...

相关阅读

相关多张图片的上传

视图内容： <tr> <th><label for="">展示详情图</label> : </th>

今天药忘吃喽~/ 2023年08月17日 16:18/ 0 赞/ 70 阅读

相关自定义上传图片（自定义上传input样式）

1.Html文件 <!DOCTYPE html> <html lang="en"> <head> <meta chars

灰太狼/ 2022年12月20日 03:11/ 0 赞/ 175 阅读

相关 js上传多张图片并显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

阳光穿透心脏的1/2处/ 2022年09月14日 08:42/ 0 赞/ 309 阅读

相关 vue上传多张图片

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWd

我会带着你远行/ 2022年06月08日 11:56/ 0 赞/ 365 阅读

相关 springmvc上传多张图片

在pom.xml中加入 <dependency> <groupId>commons-fileupload</groupId>

小咪咪/ 2022年06月07日 12:36/ 0 赞/ 278 阅读

相关拖拽上传图片(可多张)

upload.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

左手的ㄟ右手/ 2022年06月03日 10:36/ 0 赞/ 284 阅读

相关 node+ajax实现多张图片上传

前台代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit

港控/mmm°/ 2022年05月29日 08:24/ 0 赞/ 354 阅读

相关 JS-wangEditor自定义上传多张图片

wangEditor是一款开源的富文本编辑器，除默认实现，还提供非常多自定义参数，看看如何自定义上传多张图片。 var E = window.wangEditor;

阳光穿透心脏的1/2处/ 2022年05月10日 04:33/ 0 赞/ 1312 阅读

相关使用AutoIt自动化上传多张图片

简介：自动化过程中遇到上传多张图片的情况，但使用selenium无法模拟windows窗口操作，所以尝试使用AutoIt解决，使用AutoIt每次上传一张图片很简单，这次我们是

矫情吗；*/ 2022年04月04日 04:01/ 0 赞/ 455 阅读

相关 FileReader上传多张图片

使用Promise实现同步处理 <div> <input type="file" accept="image/" @change="setImage

客官°小女子只卖身不卖艺/ 2021年06月24日 16:10/ 0 赞/ 659 阅读