Zblog实现图片上传功能失效,不再依赖UE编辑器

话说之前就有人反馈,主题设置无法上传图片,当时我还很懵逼,怎么会呢,结果一看才知道没有使用官方的UE编辑器,所以无法上传,没有组件支持,然后就没有然后了,解决办法就是启用官方的UE编辑器或者,,,放弃上传图片的功能直接添加图片网址,当然现在觉得挺敷衍的是不?但是没办法了,当时工作较多,只能告知问题原因和临时的解决办法了。


Zblog实现图片上传功能失效,不再依赖UE编辑器,19-49-40-040.gif,分享,教程,建站,经验,图文教程,技术,百度,Zblog,zblog教程,第1张

最近定制了一款主题,要求就是适配可风大佬的TinyMCE编辑器,那么之前发现图片无法上传的图片就会重现,所以偷@可风,问下怎么兼容编辑器的图片上传组件,大佬就是大佬,告诉我用编辑器兼容套loe了,如果没启用编辑器岂不是无法上传了么,然后百忙之中给我写了这个代码,投去羡慕嫉妒的目光。

按照可风的代码及教程已经部署完成了,但是在兼容的时候组件的名称不对,所以重新修改了主题设置的名称,不废话了,上代码。

代码放在include.php里面,因为需要先挂载接口:

Add_Filter_Plugin('Filter_Plugin_Cmd_Ajax','应用ID_Cmd_Ajax'); //挂载接口

然后复制粘贴如下组件代码:

//可风大佬图片上传功能 function 应用ID_Cmd_Ajax($src){ global $zbp; if ($src == '应用ID_upload'){ if (!$zbp->CheckRights('UploadPst')) { $zbp->ShowError(6); } Add_Filter_Plugin('Filter_Plugin_Upload_SaveFile','应用ID_Upload_SaveFile_Ajax'); $_POST['auto_rename'] = 1; PostUpload(); echo json_encode(array('url' => $GLOBALS['tmp_ul']->Url)); exit; } } function 应用ID_Upload_SaveFile_Ajax($tmp, $ul){ $GLOBALS['tmp_ul'] = $ul; }

添加之后记得自己修改应用ID,改成主题或者插件的ID名,接下来是JS代码:

!function(o){      var b=$('body'),d;      function upload(callback){          var id='ajax_upload'+new Date().getTime();          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,function(){          d = $(this);          upload(function(r){              o.success(d, r);          });      });  }({      src: '应用ID_upload', //这里应用ID改为你的应用ID      click: '.upimgbutton', //这里改成你传按钮的css选择器      accept: '.jpg,.jpeg,.png,.gif,.bmp,.svg',      success: function(e, r){          console.log('上传成功,图片链接:'+r.url);          e.siblings('.uplod_img').attr("value", r.url); //把链接填写在上传按钮兄弟元素的 .input_img文本框          e.siblings('img').attr('src',r.url); //修改同级元素img图片链接          e.val('选择文件'); //恢复上传按钮名称      },      error: function(e){          alert('上传失败');      },      progress: function(e,n){          e.val('上传进度:'+n+'%');      }  });

同样,需要修改应用ID,改成自己主题的ID就行了,不得不说大佬的教程很详细了,该修改和标注的地方都注释了,自己对照下,再次投去羡慕的目光。但是我添加的时候失败了(罗老师打脸.gif),为什么?因为不并不知道这个JS放在哪里,所以我把这个js放在了upload.js文件里面,上传到主题目录,然后打开了main.php文件,在最下面添加了调用JS代码,如图:

Zblog实现图片上传功能失效,不再依赖UE编辑器,19-53-12-012.png,分享,教程,建站,经验,图文教程,技术,百度,Zblog,zblog教程,第2张


红色框内就是组件的js代码,我放在里main.php里面,主题兼容了UE编辑器,判断是否开启了,如果未开启则使用独立组件,调用代码:

<script src="'.$zbp->host.'zb_users/theme/xyuw/script/upload.js"></script>

好了教程结束,其实你们只要使用前两段代码就行,或者根本不需要您亲自动手,因为主题后期会逐一适配和兼容,您只需要更新最新版即可,当然代码不仅仅是运用在zblog可以是任何的程序,比如WP或者TY再或者EM等等,使用过程中有问题留言反馈吧,反正,,,我也不会解决,哈哈哈~~~

相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注