WordPress评论添加AJAX图片上传

2021-05-22 0 1,170 百度已收录

这篇WordPress谈论添加AJAX图片上传教程不仅可以用于WordPress谈论添加AJAX图片,而且在其它的也可以用来参考学习,尤其是新手对于AJAX不太熟悉的小同伴。

  1. /**
  2. * Name:行使图床添加AJAX谈论图片上传功效
  3. */ 
  4. function ruikeedu_upload_img() {
  5. echo '<div class="zz-add-img"><input id="zz-img-file" type="file" accept="image/*"><div id="zz-img-add">上传图片</div><div id="zz-img-show"></div></div>';
  6. }
  7. add_filter('comment_form_after', 'ruikeedu_upload_img');
  8. function ruikeedu_embed_images($content) {
  9. $content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<img src=\"$1\" alt=\"" . basename("$1") . "\" />"', $content);
  10. return $content;
  11. }
  12. add_filter('comment_text', 'ruikeedu_embed_images');
  13. //jquery代码
  14. $('#zz-img-file').change(function() {
  15. var f=this.files[0];
  16. var formData=new FormData();
  17. formData.append('smfile',f);
  18. $.ajax({
  19. url:'https://xxxx.com/api/upload',
  20. type : 'POST',
  21. processData : false,
  22. contentType : false,
  23. data:formData,
  24. beforeSend: function (xhr) {
  25. $('#zz-img-add').text('Uploading...');
  26. },
  27. success:function(res){
  28. $("#zz-img-add").text('上传图片');
  29. $('#zz-img-show').append('<img src="'+res.data.url+'" />');
  30. $('textarea[name="comment"]').val($('textarea[name="comment"]').val()+'[img]'+res.data.url+'[/img]').focus();
  31. }
  32. });
  33. });
  34. //CSS代码
  35. div#zz-img-show img {
  36. height: 60px;
  37. margin: 0 10px 0 0;
  38. }
  39. .zz-add-img {
  40. width: 100%;
  41. height: 60px;
  42. overflow: hidden;
  43. }
  44.  
  45.  
  46. input#zz-img-file {
  47. width: 120px;
  48. height: 100%;
  49. float: left;
  50. position: relative;
  51. opacity: 0;
  52. }
  53.  
  54.  
  55. div#zz-img-show {
  56. float: left;
  57. }
  58.  
  59.  
  60. div#zz-img-add {
  61. width: 120px;
  62. height: 58px;
  63. float: left;
  64. margin: 0 15px 0 -120px;
  65. text-align: center;
  66. line-height: 60px;
  67. border: 1px solid #eee;
  68. color: #666;
  69. font-size: 16px;
  70. }
  71. /*防止图片过大超出,不兼容主题就删除*/
  72. .comment_text img {
  73. max-width: 85%;
  74. display: block;
  75. margin: 15px 0;
  76. }

WordPress谈论添加AJAX图片上传今天就写到这里,希望人人天天同创客云提高一点。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress评论添加AJAX图片上传 https://zhutizhen.com/14636.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章