最便捷的zblog实现ajax上传文件并调用

zblog简单方法实现ajax上传文件，只需要简单的操作即可实现，使用方法也是最便捷的，只需要使用下面的php和JavaScript代码复制到你的插件或主题中，将“你的插件ID”改为你实际的插件或主题的ID

录屏示例所用代码，上传成功后自动修改图片链接、自动填充到指定文本框

<button type=button onclick="upload.call(this, {img: '.meta_photo', input: '[name=meta_photo]'})">上传图片</button>

php代码

Add_Filter_Plugin('Filter_Plugin_Cmd_Ajax','你的插件ID_Cmd_Ajax'); //挂载接口

function 你的插件ID_Cmd_Ajax($src){
    global $zbp;
    if ($src == '你的插件ID_upload'){
        
        $json = array('code' => 1);
        
        try {
            if (!$zbp->CheckRights('UploadPst')) {
                $zbp->ShowError(6);
            }
            
            $_POST['auto_rename'] = 1;
            $upload = PostUpload(); //这里要求zblog版本在1.7以上
            
            $json['data'] = array(
                'url'        => $upload->Url,
                'size'       => $upload->Size,
                'name'       => $upload->Name,
                'sourceName' => $upload->SourceName
            );
            
        } catch (Exception $e) {
            $json['code'] = 0;
            $json['msg'] = $e->getMessage();
        }
        
        exit(json_encode($json));
    }
}

JavaScript代码

function upload(option){
    var id = 'ajax_upload' + new Date().getTime();
    var body = $('body');
    var clickBtn = $(this);
    var originText = clickBtn.text();
    
    body.append(`<input type="file" id="${id}" accept="${option.accept}" style="display:none">`);
    body.one('change', '#' + id, function(){
        var form = new FormData();
        form.append('file',$(this)[0].files[0]);
        $.ajax({
            url: ajaxurl + '你的插件ID_upload',
            type: 'POST',
            dataType: 'json',
            data: form,
            contentType: false,
            processData: false,
            xhr: function() {
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        var per = Math.floor(e.loaded / e.total * 100);
                        if (typeof option.progress === 'function'){
                            option.progress(per, clickBtn);
                        }else{
                            clickBtn.attr('disabled', true).text(`上传中...${per}%`);
                        }
                    }
                });
                return xhr;
            },
            success:function(res){
                if (typeof option.success === 'function'){
                    option.success(res, clickBtn);
                }else if(res.code == 0){
                    alert(res.msg);
                }else if(res.code == 1){
                    var url = res.data.url;
                    if (option.img){
                        $(option.img).attr('src', url);
                    }
                    
                    if (option.input){
                        $(option.input).val(url);
                    }
                }
            },
            error:function(res){
                if (typeof option.error === 'function'){
                    option.error(res, clickBtn);
                }else{
                    alert('上传失败');
                }
            },
            complete: function(){
                clickBtn.attr('disabled', false).text(originText);
            }
        });
    });
    
    $('#' + id).click();
    
    return false;
}

调用方法

例一（仅允许上传指定文件类型并将图片url填充到指定文本框）

<button type="button" onclick="upload.call(this, {input: '[name=logo]', accept: '.png,.jpg,.jpeg'})">上传</button>
添加一个上传按钮，仅允许png jpg jpeg图片，上传成功后自动将图片url填充到 name=logo 的文本框

例二（将上传后的图片链接填充到指定文本框，修改指定图片的src为图片链接）

<button type="button" onclick="upload.call(this, {input: '[name=banner]', img: '.catebanner', accept: '.png'})">上传</button>
添加一个上传按钮，仅允许png图片，上传成功后自动将图片url填充到 name=banner 的文本框，并且改变 .catebanner 图片的链接

例三（自定义回调函数）

<button type="button" onclick="upload.call(this, {success: 'uploadSuccess', accept: '.png'})">上传</button>
<script>
function uploadSuccess(res, button){
  alert('上传成功');
  alert('图片链接：' + res.data.url);
}
</script>