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 中转化了下。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/91213

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买