WordPress教程

WordPress前端投稿实现图片上传

也想出现在这里?联系我们
面包多

好像现在的站长都喜欢让用户投稿,最近看上了一款前端富文本编辑器 quill,顺便做下前端投稿的功能。前端投稿最重要的就是媒体文件的上传,quill 富文本编辑器也提供了相应的 api,我们完全可以自己实现前端上传媒体文件的功能。这篇文章主要涉及到 wordpress 的媒体上传函数 wp_insert_attachment 的使用,PHP 接口的写法,ajax 上传文件并回调的应用。来和我一起打造一款自己的前端富文本编辑器吧!
WordPress前端投稿实现图片上传-创客云
首先新建个 HTML 页面,里面写上加载 quill 前端编辑器的基本代码,直接参考 quill 官网的开发文档快速接入步骤说明即可。我这里就不贴 HTML 头部和底部了,自己写吧。引入 quill 样式:

  1. <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
也想出现在这里?联系我们
创客主机

引入 js 支持

  1. <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

加载容器

  1. <div id="editor"></div>

初始化配置

  1. <script>
  2. var toolbarOptions = [
  3.   ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  4.   ['blockquote', 'code-block'],
  5.  
  6.   [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  7.   [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  8.   [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  9.   [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  10.   [{ 'direction': 'rtl' }],                         // text direction
  11.  
  12.   [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  13.   [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  14.  
  15.   [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  16.   [{ 'font': [] }],
  17.   [{ 'align': [] }],
  18.  ['image', 'video'],
  19.   ['clean']                                         // remove formatting button
  20. ];
  21.   var quill = new Quill('#editor', {
  22.    modules: {
  23.     toolbar: toolbarOptions
  24.   },
  25.     theme: 'snow'
  26.   });
  27. </script>

上面部分只是为了加载 quill 富文本编辑器而已,现在用浏览器访问下应该可以看到一个完整的富文本编辑器了,下面接着写上传图片的 js 代码。

重写编辑器的图片预览方法

  1. <script>
  2. var toolbar = quill.getModule('toolbar');
  3.             toolbar.addHandler('image', function () {
  4.                 var fileInput = this.container.querySelector('input.ql-image[type=file]');
  5.                 if (fileInput == null) {
  6.                     fileInput = document.createElement('input');
  7.                     fileInput.setAttribute('multiple', 'multiple');
  8. 		    fileInput.setAttribute('id', 'file');
  9. 		    fileInput.setAttribute('type', 'file');
  10. 		    fileInput.setAttribute('accept', 'image/*');
  11.                     fileInput.setAttribute('name', 'files[]');
  12.                     fileInput.classList.add('ql-image');
  13.                     fileInput.addEventListener('change', function () {
  14.                         if (fileInput.files != null && fileInput.files[0] != null) {
  15.                             var formData = new FormData();
  16.                             formData.append('files', fileInput.files[0]);
  17. 				$.ajax({
  18. 				url: '上传图片接口地址',
  19.                                 type: 'POST',
  20.                                 cache: false,
  21.                                 data: formData,
  22.                                 processData: false,
  23.                                 contentType: false
  24.                             }).done(function (res) {
  25. 				json1=eval("(" + res + ")");
  26. 				console.log('>>>>>>'+json1.data.src);
  27.                                 var range = quill.getSelection(true);
  28.                                 quill.insertEmbed(range.index, 'image', json1.data.src);
  29.                                 quill.setSelection(range.index + 1);
  30.                             }).fail(function (res) {
  31.                             });
  32.                         }
  33.                     });
  34.                     this.container.appendChild(fileInput);
  35.                 }
  36.                 fileInput.click();
  37.             });
  38. </script>

好了,前端部分结束,下面是 PHP 实现的 WordPress 媒体上传接口,注意文件引用路径。

  1. require dirname(__FILE__).'/../../../../wp-load.php';
  2. //WordPress核心,根目录下,自己换
  3. $file = $_FILES['files'];
  4. if ( !empty( $file ) ) {
  5. // 获取上传目录信息
  6. $wp_upload_dir = wp_upload_dir();
  7. // 将上传的图片文件移动到上传目录
  8. $basename = $file['name'];
  9. $filename = $wp_upload_dir['path'] . '/' . $basename;
  10. $re = rename( $file['tmp_name'], $filename );
  11. $attachment = array(
  12. 'guid' => $wp_upload_dir['url'] . '/' . $basename,
  13. 'post_mime_type' => $file['type'],
  14. 'post_title' => preg_replace( '/\.[^.]+$/', '', $basename ),
  15. 'post_content' => '',
  16. 'post_status' => 'inherit'
  17. );
  18. $attach_id = wp_insert_attachment( $attachment, $filename );
  19. require_once( ABSPATH . 'wp-admin/includes/image.php' );
  20. $attach_data = wp_generate_attachment_metadata( $attach_id, $filename );
  21. wp_update_attachment_metadata( $attach_id, $attach_data );
  22. $re = array('code'=>0,'msg'=>'上传成功','data'=>array('src'=>wp_get_attachment_url( $attach_id ),'title'=>''));
  23. print_r(json_encode($re));
  24. }

有点奇怪的是我在 PHP 返回了 json 数据,但 js 接收到的却是字符串,只好在 js 中转化了下。

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
(0)

本文由来源 代码狗,由 PetitQ 整理编辑!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!