zblog
当前位置:首页 > 商学院 > zblog > 正文内容

zblog

zblogphp原生代码上传图片

豫唐网络2022-11-04 17:04734

 不依托第三方插件实现的php原生上传图片的方法,操作步骤如下。

1、在当前主题或者当前插件的目录下,创建新文件script/upload.js,写入代码

!function(o){
    var b=$('body');
    function upload(){
        var id='ajax_upload'+new Date().getTime(),d = $(this);;
        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,upload);
}({
    src: 'ytecn_ai_xzjt',  //这里AppName改为你的应用ID
    click: '.ytecn_upimgbutton',
    accept: '.jpg,.jpeg,.png,.gif,.bmp,.svg',
    success: function(e, r){
        console.log('上传成功,图片链接:'+r.url);
        e.siblings('.ytecn_input_img').attr("value", r.url);
        e.siblings('img').attr('src',r.url);
        e.val('选择文件');
    },
    error: function(e){
        alert('上传失败');
    },
    progress: function(e,n){
        e.val('上传进度:'+n+'%');
    }
});

2、通过Filter_Plugin_Cmd_Ajax添加ajax异步上传

function ActivePlugin_ytecn_ai_xzjt() {
    Add_Filter_Plugin('Filter_Plugin_Cmd_Ajax', 'ytecn_ai_xzjt_Cmd_Ajax');                
}
function ytecn_ai_xzjt_Cmd_Ajax($src)
{
    global $zbp;
    if ($src == 'ytecn_ai_xzjt') {
        if (!$zbp->CheckRights('UploadPst')) {
            $zbp->ShowError(6);
        }
        Add_Filter_Plugin('Filter_Plugin_Upload_SaveFile', 'ytecn_ai_xzjt_Upload_SaveFile_Ajax');
        $_POST['auto_rename'] = 1;
        PostUpload();
        echo json_encode(array('url' => $GLOBALS['tmp_ul']->Url));
        exit;
    }
}
function ytecn_ai_xzjt_Upload_SaveFile_Ajax($tmp, $ul)
{
    $GLOBALS['tmp_ul'] = $ul;
}

3、在需要的地方调用,比如在文章编辑页面。

function ActivePlugin_ytecn_ai_xzjt() {
    Add_Filter_Plugin('Filter_Plugin_Edit_Response5','ytecn_ai_xzjt_edit_response');                 
}
function ytecn_ai_xzjt_edit_response() {
    global $zbp, $article;
    echo '<script type="text/javascript" src="' . $zbp->host . 'zb_users/plugin/ytecn_ai_xzjt/script/upload.js"></script>';
    echo '<style type="text/css">
        .ytecn_input_img{width:40%!important;}
        .ytecn_upimgbutton{ width:120px;}
        .ytecn_upimg{width:100px;vertical-align: middle;}</style>';
    echo '<div id="tesetu">缩略图1:
    <input name="meta_pic" id="edtTitle" type="text" class="ytecn_input_img" value="' . $article->Metas->tesetu1 . '" />
        <input type="button" class="ytecn_upimgbutton" value="选择图片">
        <img class="ytecn_upimg" src="' . $article->Metas->pic. '">
        </div>';
    echo '<div id="tesetu">缩略图2:
    <input name="meta_pic2" id="edtTitle" type="text" class="ytecn_input_img" value="' . $article->Metas->tesetu2 . '" />
        <input type="button" class="ytecn_upimgbutton" value="选择图片">
        <img class="ytecn_upimg" src="' . $article->Metas->pic2. '">
        </div>';
}


扫描二维码推送至手机访问。

版权声明:本文由汤阴县豫唐网络科技有限公司发布,如需转载请注明出处。

本文链接:https://www.ytecn.com/post/396.html

分享给朋友:

相关文章

zblogphp提示主题模板的编译文件不存在

zblogphp提示主题模板的编译文件不存在

首先,进入后台首页,点击“ [清空缓存并重新编译模板]”,问题解决。如解决不了,请继续观看。有时候在对zblogphp搬家的时候会出现“主题模板的编译文件不存在”的问题,造成这个问题的主要原因是因为“...

zblog提示授权文件非法怎么办

zblog提示授权文件非法怎么办

        zblog在开启主题或者插件的时候,有时候会提示授权文件非法。这种需要怎么处理么?  ...

百度小程序搜索组件批量提交文章代码

百度小程序搜索组件批量提交文章代码

本方案为计划任务解决方案。1、在文章表新建一个字段,如log_ytecn_bdsp,设置默认值为0。2、在根目录创建一个文件,比如baidusearchpost.php,<?php requi...

根据ID批量修改文章状态

根据ID批量修改文章状态

本案例为通过txt文档输入N多个文章id,然后根据txt输入的ID批量对文章状态进行修改。操作步骤如下:1、在网站根目录创建txt文件,命名为id.txt;2、在txt里面批量写入需要修改状态的id,...

批量重命名批量处理别名

批量重命名批量处理别名

        在运营网站的时候会遇见被采集的情况,但zblog的文章默认url又是递增的数字模式。为了防止被采集,我们...

zblog主题模板制作基础篇需要掌握什么知识

zblog主题模板制作基础篇需要掌握什么知识

所需知识如下:1、学会创建主题;2、了解主题文件下各文件的作用;3、了解主题模板的主要组成页面;4、学会调用主题的css、js等文件;5、学会调用公共文件;6、学会调用简单的标签;7、学习简单的模板语...