WordPress评论添加AJAX图片上传

发布于 2023.06.02

这篇 WordPress 评论添加 AJAX 图片上传教程不仅可以用于 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=?]*(.*?)([/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 图片上传今天就写到这里，希望大家每天同创客云进步一点。

类别：WordPress教程、

本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。

猜你喜欢GUESS YOU LIKE

WordPress添加贴吧表情

PHP使用Imagick扩展处理图片

如何在WordPress中添加用户在线功能？

WordPress添加百度主动推送

Windows上配置Nginx+PHP7+WordPress

WordPress静态缓存插件WP Super Cache

评论 (0)COMMENT