快速实现图片上传功能，不再依赖UE编辑器

话说之前就有人反馈，主题设置无法上传图片，当时我还很懵逼，怎么会呢，结果一看才知道没有使用官方的UE编辑器，所以无法上传，没有组件支持，然后就没有然后了，解决办法就是启用官方的UE编辑器或者，，，放弃上传图片的功能直接添加图片网址，当然现在觉得挺敷衍的是不？但是没办法了，当时工作较多，只能告知问题原因和临时的解决办法了。

最近定制了一款主题，要求就是适配可风大佬的TinyMCE编辑器，那么之前发现图片无法上传的图片就会重现，所以偷@可风，问下怎么兼容编辑器的图片上传组件，大佬就是大佬，告诉我用编辑器兼容套loe了，如果没启用编辑器岂不是无法上传了么，然后百忙之中给我写了这个代码，投去羡慕嫉妒的目光。

按照可风的代码及教程已经部署完成了，但是在兼容的时候组件的名称不对，所以重新修改了主题设置的名称，不废话了，上代码。

代码放在include.php里面，因为需要先挂载接口：

Add_Filter_Plugin('Filter_Plugin_Cmd_Ajax','应用ID_Cmd_Ajax'); //挂载接口

然后复制粘贴如下组件代码：

//可风大佬图片上传功能
function 应用ID_Cmd_Ajax($src){
    global $zbp;
    if ($src == '应用ID_upload'){
        if (!$zbp->CheckRights('UploadPst')) {
            $zbp->ShowError(6);
        }
        Add_Filter_Plugin('Filter_Plugin_Upload_SaveFile','应用ID_Upload_SaveFile_Ajax');
        $_POST['auto_rename'] = 1;
        PostUpload();
        echo json_encode(array('url' => $GLOBALS['tmp_ul']->Url));
        exit;
    }
}
function 应用ID_Upload_SaveFile_Ajax($tmp, $ul){
    $GLOBALS['tmp_ul'] = $ul;
}

添加之后记得自己修改应用ID，改成主题或者插件的ID名，接下来是JS代码：

!function(o){
    var b=$('body'),d;
    function upload(callback){
        var id='ajax_upload'+new Date().getTime();
        b.append(`<input type="file" id="${id}" accept="${o.accept}" style="display:none">`);
        var el=$('#'+id);
        b.one('change','#'+id,function(){
            var f = new FormData();
            f.append('file',$(this)[0].files[0]);
            $.ajax({
                url: ajaxurl+o.src,
                type: 'POST',
                dataType: 'json',
                data: f,
                contentType: false,
                processData: false,
                xhr: function() {
                    var xhr = new XMLHttpRequest(),t;
                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            t = Math.floor(e.loaded / e.total * 100);
                            o.progress && o.progress(d, t);
                        }
                    });
                    return xhr;
                },
                success:function(r){
                    o.success(d, r);
                },
                error:function(r){
                    o.error && o.error(d,r);
                }
            });
        }),
        el.click();
    }
    b.on('click',o.click,function(){
        d = $(this);
        upload(function(r){
            o.success(d, r);
        });
    });
}({
    src: '应用ID_upload',  //这里应用ID改为你的应用ID
    click: '.upimgbutton',  //这里改成你传按钮的css选择器
    accept: '.jpg,.jpeg,.png,.gif,.bmp,.svg',
    success: function(e, r){
        console.log('上传成功，图片链接：'+r.url);
        e.siblings('.uplod_img').attr("value", r.url);  //把链接填写在上传按钮兄弟元素的 .input_img文本框
        e.siblings('img').attr('src',r.url);  //修改同级元素img图片链接
        e.val('选择文件');  //恢复上传按钮名称
    },
    error: function(e){
        alert('上传失败');
    },
    progress: function(e,n){
        e.val('上传进度：'+n+'%');
    }
});

同样，需要修改应用ID，改成自己主题的ID就行了，不得不说大佬的教程很详细了，该修改和标注的地方都注释了，自己对照下，再次投去羡慕的目光。但是我添加的时候失败了（罗老师打脸.gif），为什么？因为我并不知道这个JS放在哪里，所以我把这个js放在了upload.js文件里面，上传到主题目录，然后打开了main.php文件，在最下面添加了调用JS代码，如图：

红色框内就是组件的js代码，我放在里main.php里面，主题兼容了UE编辑器，判断是否开启了，如果未开启则使用独立组件，调用代码：

<script src="'.$zbp->host.'zb_users/theme/xyuw/script/upload.js"></script>

好了教程结束，其实你们只要使用前两段代码就行，或者根本不需要您亲自动手，因为主题后期会逐一适配和兼容，您只需要更新最新版即可，当然代码不仅仅是运用在zblog可以是任何的程序，比如WP或者TY再或者EM等等，使用过程中有问题留言反馈吧，反正，，，我也不会解决，哈哈哈~~~