WordPress评论添加AJAX图片上传

以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家，仅供参考

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

/**

* Name:利用图床添加AJAX评论图片上传功能

*/

function ruikeedu_upload_img() {

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>';

}

add_filter('comment_form_after','ruikeedu_upload_img');

function ruikeedu_embed_images($content) {

$content = preg_replace('/[img=?]*(.*?)([/img)?]/e','"<img src="$1" alt="" . basename("$1") . "" />"',$content);

return $content;

}

add_filter('comment_text','ruikeedu_embed_images');

//jquery代码

$('#zz-img-file').change(function() {

var f=this.files[0];

var formData=new FormData();

formData.append('smfile',f);

$.ajax({

url:'https://xxxx.com/api/upload',

type : 'POST',

processData : false,

contentType : false,

data:formData,

beforeSend: function (xhr) {

$('#zz-img-add').text('Uploading...');

},

success:function(res){

$("#zz-img-add").text('上传图片');

$('#zz-img-show').append('<img src="'+res.data.url+'" />');

$('textarea[name="comment"]').val($('textarea[name="comment"]').val()+'').focus();

}

});

});

//CSS代码

div#zz-img-show img {

height: 60px;

margin: 0 10px 0 0;

}

.zz-add-img {

width: 100%;

height: 60px;

overflow: hidden;

}

?

?

input#zz-img-file {

width: 120px;

height: 100%;

float: left;

position: relative;

opacity: 0;

}

?

?

div#zz-img-show {

float: left;

}

?

?

div#zz-img-add {

width: 120px;

height: 58px;

float: left;

margin: 0 15px 0 -120px;

text-align: center;

line-height: 60px;

border: 1px solid #eee;

color: #666;

font-size: 16px;

}

/*防止图片过大超出,不兼容主题就删除*/

.comment_text img {

max-width: 85%;

display: block;

margin: 15px 0;

}

WordPress 评论添加 AJAX 图片上传今天就写到这里，希望大家每天同创客云进步一点。

以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助，欢迎收藏、点赞、推荐、分享。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!