zblogphp原生代码上传图片
不依托第三方插件实现的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>';
}





