zblog简单方法实现ajax上传文件并调用

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

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>