WordPress评论添加AJAX图片上传

这篇 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)?]/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 图片上传今天就写到这里,希望大家每天同创客云进步一点。

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

0
分享到:
搬码资源网广告位

评论0

请先

没有账号? 忘记密码?