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

zblog

zblogphp原生代码上传图片

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

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

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

!function(o){
varb=$('body');
functionupload(){
varid='ajax_upload'+newDate().getTime(),d=$(this);;
b.append(`<inputtype="file"id="${id}"accept="${o.accept}"style="display:none">`);
varel=$('#'+id);
b.one('change','#'+id,function(){
varf=newFormData();
f.append('file',$(this)[0].files[0]);
$.ajax({
url:ajaxurl+o.src,
type:'POST',
dataType:'json',
data:f,
contentType:false,
processData:false,
xhr:function(){
varxhr=newXMLHttpRequest(),t;
xhr.upload.addEventListener('progress',function(e){
if(e.lengthComputable){
t=Math.floor(e.loaded/e.total*100);
o.progress&&o.progress(d,t);
}
});
returnxhr;
},
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异步上传

functionActivePlugin_ytecn_ai_xzjt(){
Add_Filter_Plugin('Filter_Plugin_Cmd_Ajax','ytecn_ai_xzjt_Cmd_Ajax');
}
functionytecn_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();
echojson_encode(array('url'=>$GLOBALS['tmp_ul']->Url));
exit;
}
}
functionytecn_ai_xzjt_Upload_SaveFile_Ajax($tmp,$ul)
{
$GLOBALS['tmp_ul']=$ul;
}

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

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


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

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

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

分享给朋友:

相关文章

zblogphp文章页面编辑页开始接口说明

zblogphp文章页面编辑页开始接口说明

接口名称:Filter_Plugin_Edit_Begin接口描述:文章编辑页加载前处理内容。应用场景:可直接跳转到其他页面,处理自身业务流程。调用方法:Add_Filter_Plugin('...

zblogphp当天发表的文章日期标红

zblogphp当天发表的文章日期标红

模拟下代码场景。{foreach$articlesas$article} <h4class="post-date">{$article.Time()}</h4&...

zblogphp文章页面编辑3号输出接口说明

zblogphp文章页面编辑3号输出接口说明

接口名称:Filter_Plugin_Edit_Response3接口描述:文章编辑页面3号输出接口,具体位置位于右侧底部。应用场景:可在文章(页面)编辑页增加自定义参数,如自定义表单字段等。调用方法...

zblogphp打开调试模式的方法zblogphp程序报错怎么办

zblogphp打开调试模式的方法zblogphp程序报错怎么办

因为出问题了,所以要开调试定位和解决,而不是因为开了调试,所以出问题了。未开调试模式的报错界面但只发这种图片,是寻求不到帮助的,除非发图的时候主题或者插件的作者正好看到了。所以,我们需要开启调试模...

zblogphp调试登录助手

zblogphp调试登录助手

本着不接触用户账户密码的原则,请优先根据本插件提供信息。《调试登录助手》,地址:https://app.zblogcn.com/?id=18484本插件用于在不需要给出密码明文的前提下让他人登录站点后...

查看当前页面使用的sql语句zblog版

查看当前页面使用的sql语句zblog版

在使用网站的时,有时候会遇见页面打开缓慢情况,在确定服务器和访问量均是正常的情况下,这个时候一般都是程序中存在慢sql导致。在zblog中如何打开sql语句查看呢?这个时候我们需要用到debug工具。...