WebStack 导航主题有小伙伴评论说能不能加个投稿页,这样直接投稿到“网址”文章类型,管理员只要审核就可以了。

根据下文方法,投稿页基本框架一会就弄好了,但是在网址图标设置碰到了问题,怎么上传图片附件呢?一番搜索后找到了方法:使用 wp_insert_attachment() 上传附件。

wp_insert_post() 插入文章到数据库,WordPress 制作投稿页​www.iowen.cn

我们来研究一下 WordPress 如何在主题或者插件的开发中上传附件:

主要参考这个函数:wp_insert_attachment()

后端程序

新建 img-upload.php 文件把下方代码复制到文件里,放入主题目录,说明请看注释。

<?php
/*** WordPress 投稿页上传图片,支持游客上传* 原文地址:https://www.iowen.cn/wordpress-visitors-upload-pictures* 一为忆* WebStack 导航主题*/
if ( 'POST' != $_SERVER['REQUEST_METHOD'] ) {header('Allow: POST');header('HTTP/1.1 405 Method Not Allowed');header('Content-Type: text/plain');exit;
}
require dirname(__FILE__).'/../../../../wp-load.php';                     // 根据文件位置修改路径,我放置在主题目录的 /inc 文件夹内
nocache_headers();
$extArr = array("jpg", "png", "jpeg");
$file = $_FILES['files'];
if ( !empty( $file ) ) {$wp_upload_dir = wp_upload_dir();                                     // 获取上传目录信息$basename = $file['name'];$basesize = $file['size'];$baseext = pathinfo($basename, PATHINFO_EXTENSION);/*  使用前台 js 判断if (!in_array($baseext, $extArr)) { echo '{"status":3,"msg":"图片类型只能是jpeg,jpg,png!"}'; exit();}  if ($basesize > (1000 * 1024)) { echo '{"status":3,"msg":"图片大小不能超过1M"}'; exit();} */$dataname = date("YmdHis_").substr(md5(time()), 0, 8) . '.' . $baseext;$filename = $wp_upload_dir['path'] . '/' . $dataname;rename( $file['tmp_name'], $filename );                               // 将上传的图片文件移动到上传目录$attachment = array('guid'           => $wp_upload_dir['url'] . '/' . $dataname,      // 外部链接的 url'post_mime_type' => $file['type'],                                // 文件 mime 类型'post_title'     => preg_replace( '/.[^.]+$/', '', $basename ),  // 附件标题,采用去除扩展名之后的文件名'post_content'   => '',                                           // 文章内容,留空'post_status'    => 'inherit');$attach_id = wp_insert_attachment( $attachment, $filename );          // 插入附件信息if($attach_id != 0){require_once( ABSPATH . 'wp-admin/includes/image.php' );          // 确保包含此文件,因为wp_generate_attachment_metadata()依赖于此文件。$attach_data = wp_generate_attachment_metadata( $attach_id, $filename );wp_update_attachment_metadata( $attach_id, $attach_data );        // 生成附件的元数据,并更新数据库记录。// 返回消息至前端print_r(json_encode(array('status'=>1,'msg'=>'图片添加成功','data'=>array('src'=>wp_get_attachment_url( $attach_id ),'title'=>time()))));exit();}else{echo '{"status":4,"msg":"图片上传失败!"}';exit();}
}

前台

在你的页面合适位置加上一下代码,对,又是合适位置,自己找啊

<!--
如果你需要上传多类图片,请设置 input 的 data-type 属性
-->
<input type="file" id="upload_ico" data-type="sites_ico" accept="image/*" onchange="uploadImg(this)" >

前端 js

下方包含主要结构,需自行添加提示方法和上传成功后的方法,如果不需要这两个功能,可以不添加。

<script> function uploadImg(file) {var doc_id=file.getAttribute("data-type");if (file.files != null && file.files[0] != null) {if (!/.(jpg|jpeg|png|JPG|PNG)$/.test(file.files[0].name)) {    showAlert(JSON.parse('{"status":3,"msg":"图片类型只能是jpeg,jpg,png!"}'));   return false;    } if(file.files[0].size > (1000 * 1024)){showAlert(JSON.parse('{"status":3,"msg":"图片大小不能超过1M"}'));return false;}var formData = new FormData();formData.append('files', file.files[0]);$.ajax({url: 'img-upload.php文件地址',type: 'POST',cache: false,data: formData,dataType: 'json',processData: false,contentType: false}).done(function (result) {showAlert(result);if(result.status == 1){//上传成功处理方法,可以将图片显示在前端 div 内。}}).fail(function (result) {showAlert(JSON.parse('{"status":3,"msg":"网络连接错误!"}'));});}else{showAlert(JSON.parse('{"status":2,"msg":"请选择文件!"}'));return false;}}function showAlert(data) {//提示信息处理并显示}
</script>

案例效果

完整逻辑你可以在下方文章下载 WebStack 导航主题体验

WordPress 版 WebStack 导航主题使用说明,更新于20191125​www.iowen.cn

wordpress wpdb-update 能获取更新的id嘛?_WordPress 投稿页上传图片,支持游客上传相关推荐

  1. 企业内网中的WSUS更新服务 服务器连接到Microsoft Update来获取更新程序

    这里我们先了解下WSUS更新的途径 1.单WSUS服务器环境 企业网络中部署了一台WSUS服务器,WSUS服务器连接到Microsoft Update来获取更新程序(称之为:同步),并分发给企业网络中 ...

  2. uniapp webview 直接调用原生摄像头拍照 拍视频 img video,通过ajax获取blob(file为特殊的blob)对象并上传到后端服务器

    web-view中通过plus方法调用摄像头拍照或者拍视频并上传后端的操作步骤如下 plus.camera.getCamera()获取摄像头对象 cmr cmr.captureImage(callba ...

  3. git 获取远程分支到本地_如何将git本地仓库上传到远程仓库?

    Step1:我们先到GitHub上创建一个仓库. Step2: 然后你就会跳转到下面的这个界面 Step3:我们先用VsCode打开你的本地仓库. 然后根据下图提示,新建一个终端. Step4: St ...

  4. 获取当前按钮所在行的input_form表单的input上传文件

    在这次的一个小项目中用到了文件的上传,在之前我对form表单的认知还只是发送用户名和密码.行吧,既然用到了那就硬着头皮上咯. 使用 首先文件的上传需要一个type=file的input.它的意义就是上 ...

  5. WordPress编辑器支持pdf上传

    自动导入Word图片,或者粘贴Word内容时自动上传所有的图片,并且最终保留Word样式,这应该是Web编辑器里面最基本的一个需求功能了.一般情况下我们将Word内容粘贴到Web编辑器(富文本编辑器) ...

  6. 【Vegas原创】wordpress 从服务器收到预料之外的响应。此文件可能已被成功上传。请检查媒体库或刷新本页。此响应不是合法的JSON响应。解决方法。...

    两种报错方式: 1.此响应不是合法的JSON响应. 2.从服务器收到预料之外的响应.此文件可能已被成功上传.请检查媒体库或刷新本页. 情况:媒体服务器上传小文件没问题,大一点的文件报这个错误. 原因: ...

  7. Android Q 获取设备唯一ID(UDID\GUID\UUID\SSAID\GAID)

    Android Q获取设备唯一ID(UDID\GUID\UUID\SSAID\GAID) 一.简介 1.1 问题背景 1.2 关键技术 二.解决方案 2.1 谷歌官方推荐方案 (4种) 2.2 实现方 ...

  8. 抖音开放平台-视频切片-视频分片上传-不合法的参数ID-不合法的对象ID

    问题描述 1.最近遇到个问题,做业务需要管理几个抖音账号,用抖音开放平台做分片上传视频,多次返回不合法参数id,提交工单之后给的回复没有任何参考价值. 2.例如视频文件按15M进行切片,调用分片上传初 ...

  9. h5/web 获取实时视频并预览上传

    注意:需要在 https 或者 localhost 下才能成功调起摄像头(如果是html使用file协议也能成功) 2022.01.14更新 在chrome内核的浏览器大部分能实现录制上传功能,不支持 ...

最新文章

  1. 教你用Keras和CNN建立模型识别神奇宝贝!(附代码)
  2. Linux文件管理命令vi,linux人云亦云(16)文件管理之VI命令一
  3. LoadRunner常见问题整理
  4. 使用flink Table Sql api来构建批量和流式应用(3)Flink Sql 使用
  5. 视频内容理解在手淘逛逛中的应用与落地
  6. NGINX前端代理TOMCAT取真实客户端IP
  7. 如何在SAP Kyma的控制台里扩展新的UI
  8. Android之面试题总结加强版(一)
  9. 推荐系统国内外团队介绍
  10. 一种提升语音识别准确率的方法与流程
  11. Echarts 3D饼图开发
  12. MT4API跟单、外汇API跟单接口详解
  13. 5、依赖注入(DI)dependency injection
  14. 基于朴素贝叶斯的兴趣分类
  15. 幼儿园计算机教师论文,幼儿园计算机辅助教学中教师角色定位研究
  16. day9:JAVA中while的用法
  17. 联网技术架构讨论:Facebook 如何管理150亿张照片
  18. SpringMVC----ajax跨域请求
  19. 一篇文章看懂:量化交易
  20. leetcode 字符串之单词

热门文章

  1. android之json解析优化,Android开发之json解析
  2. library not found for -lAPOpenSdk解决方案
  3. linux sed 慢,echo/awk/sed的性能问题
  4. 【思维导图】脑机音乐接口,高效检测用户的情绪状态
  5. 计算机运行游戏慢怎么办,电脑运行太慢了太卡了怎么办,台式电脑运行速度慢的解决方法...
  6. ios 裁剪框大小_iOS实现裁剪框和图片剪裁功能
  7. 计算机汉字救亡运动简史丨视频
  8. 后量子密码芯片研究取得重大突破,论文入选ISSCC 2022和CHES 2022
  9. 陈怡然团队最新研究:用复数神经网络提高梯度正则化准确度 | ICML 2021
  10. 黄仁勋从煤气灶下取出最新GPU:7nm全新安培架构,售价20万美元,训练性能顶6张V100...