这篇 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 图片上传今天就写到这里，希望大家每天同微码盒进步一点。
