若要在WordPress的评论中添加图片大部分只能添加现成的图片URL地址,如果开放博客的上传接口又会有被利用的风险,对于资源有限的虚拟主机更是伤不起。既然本地资源有限,那我们可以找个靠山来实现图片的功能。SM.MS图床提供的API十分便利,有香港阿里云节点访问速度快,可以作为评论图片的图床使用。先看看效果

实现

将以下代码放入function.php lxtx_embed_images()是用来将[img]标签替换成图片的,原本想直接插入img标签后来才发现非管理员是不允许插入的。没用代码高亮,代码翻车再修改。

/**
 * Name:利用图床添加AJAX评论图片上传功能
 * Author:E丶白
 * URL:https://zsky.me/40.html
 */
function zsky_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', 'zsky_upload_img');
function lxtx_embed_images($content) {
	$content = preg_replace('/\[img=?\]*(.*?)(\[\/img)?\]/e', '"<img src=\"$1\" alt=\"" . basename("$1") . "\" />"', $content);
	return $content;
}
add_filter('comment_text', 'lxtx_embed_images');

jquery代码 确保主题已引入jquery库
$('#zz-img-file').change(function() {
	var f=this.files[0];
	var formData=new FormData();
 	formData.append('smfile',f);
 	$.ajax({
  		url:'https://sm.ms/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;
}

AJAX上传体验还是不错的,一条评论可以插入多张图片,没图没真相快去试试吧~

ZZ’Sky的主题我自写了首页和文章页评论还没写AJAX继续拖延…

Comments | 捕获到 10 个小伙伴

上传图片
  1. 志一
    志一 Reply

    测试

  2. yy
    yy Reply

    这个周末用啊?能不能打个包或者弄个纯php的?

  3. 有图有真相
    有图有真相 Reply

    评论图片

  4. 有图有真相
    有图有真相 Reply

    评论图片

  5. 狂放
    狂放 Reply

    巨佬收下我的膝盖

  6. loao
    loao Reply

    那如果是用又拍云的话,这种方式可以实现吗?求大神指点迷津

  7. 敖弑神
    敖弑神 Reply

    发文章的时候,后台能否也能插入上传按钮到文章里呢?

  8. Roogle
    Roogle Reply

    测试一发图片评论评论图片

  9. xinroom
    xinroom Reply

    评论图片有意思?

  10. E丶白
    E丶白 Reply

    有图有真相评论图片评论图片

Back