WordPress评论添加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()+'[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;

}