0°

利用SM.MS图床为WordPress评论添加AJAX图片上传

2165 个字符,1 张图片,大约需要 3 分钟阅读

逛博客看到的,转过来收藏一下

若要在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;
}

原文链接:《利用SM.MS图床为WordPress评论添加AJAX图片上传》

除非注明,否则均为喵喵喵博客原创文章,转载请以链接形式标明本文地址

本文链接:https://www.miaomiaomiao.org/9647.html

0 条回复 A 作者 M 管理员
    当上帝赐给你荒野时,就意味着,他要你成为高飞的鹰
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论