如何用JavaScript/PHP验证订阅者是否上传视频缩略图

针对你在Betube主题子模板submit_video.php中需要实现的订阅者必须上传缩略图才能发布视频的需求，以下是有效的前端验证方案，同时补充后端验证的必要性：

前端JavaScript验证实现 #

你之前的无效代码问题在于：错误引用了不存在的表单字段，且文件输入框的验证逻辑不能用普通value判断，需要检查files集合的长度。

步骤1：绑定表单提交事件 #

给你的表单添加onsubmit属性，调用验证函数（假设表单id为video-submit-form，无id时可通过其他方式获取表单）：

<form id="video-submit-form" onsubmit="return validateThumbnail()">
  <!-- 你的表单内容（包含缩略图上传框） -->
  <button type="submit">发布视频</button>
</form>

步骤2：编写正确的验证函数 #

替换你之前的无效代码，使用以下JavaScript：

function validateThumbnail() {
  // 通过id获取缩略图上传控件
  const thumbnailInput = document.getElementById('btp_thumbnail');
  
  // 检查是否有文件被选中
  if (thumbnailInput.files.length === 0) {
    alert('请上传视频缩略图');
    thumbnailInput.focus(); // 聚焦到上传框，优化用户体验
    return false; // 阻止表单提交
  }

  // 可选：二次验证文件类型（accept属性可被绕过）
  const file = thumbnailInput.files[0];
  const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
  if (!allowedTypes.includes(file.type)) {
    alert('请上传有效的图片文件（JPG/PNG/GIF）');
    thumbnailInput.focus();
    return false;
  }

  // 验证通过，允许表单提交
  return true;
}

步骤3：嵌入代码 #

将上述函数放到模板的</body>前的<script>标签中，或添加到主题的自定义JS文件内。

关键提醒 #

• 前端验证仅做用户体验优化：必须在后端PHP代码中补充验证，防止用户绕过前端直接提交请求。
• 后端验证示例（在表单处理逻辑中添加）：

// 检查缩略图是否正常上传
if (!isset($_FILES['upload_attachment']) || $_FILES['upload_attachment']['error'][0] !== UPLOAD_ERR_OK) {
  wp_die('请上传有效的视频缩略图');
}

内容的提问来源于stack exchange，提问作者Brad Miller