#推荐

[WordPress教程] WordPress评论添加AJAX图片上传 -静鱼客栈

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

/**
* Name:利用图床添加AJAX评论图片上传功能
* Author：静鱼客栈WWW.52JYU.CN
*/ 
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()+'[img]'+res.data.url+'[/img]').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图片上传今天就写到这里，希望大家每天同静鱼客栈进步一点。