如何使用表单中的一个按钮提交两个不同的值？

Question

我有一个表单，允许用户更改他们的数据（姓名、姓氏、显示名称等）。 使用“保存设置”按钮，此数据会正确更新。

现在我正在尝试包含一个允许用户上传头像的新字段。 问题是现在我有另一个名为“上传”的按钮，用于上传用户输入的图像。 如果我点击这个，而不是上传图片，整个表单被发送并且头像不被上传。

因此，作为一种解决方案，我正在考虑创建一个按钮来执行我刚才描述的两个按钮的值。 虽然我不确定它是否真的有效。

无论如何，这就是我正在尝试做的事情，一些好心的撒玛利亚人可以告诉我找到适合我的解决方案的正确方法吗？

<form id="wpua-edit-<?php echo esc_attr( $user->ID ); ?>" enctype="multipart/form-data" name="Form" class="mts-edit-account" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' );?> >
  
//Here are all the fields of my form

  <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce', 'update-user_' . $user->ID ); ?>

  <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Save changes', 'woocommerce' ); ?></button>
  <button type="submit" class="button" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-upload' : 'wpua-upload-existing' ); ?>" name="submit" value="<?php esc_html_e( 'Upload', 'one-user-avatar' ); ?>"><?php esc_html_e( 'Upload', 'one-user-avatar' ); ?></button>

  <input type="hidden" name="action" value="save_account_details" />
  <input type="hidden" name="wpua_action" value="update" />
  <input type="hidden" name="user_id" id="user_id" value="<?php echo esc_attr( $user->ID ); ?>" />

</form>

Answer 1

您将头像上传设计为表单中的表单。 这是不允许的。

如果您想做这样的事情，您可以使用 AJAX 将图像作为单独的背景步骤上传。 但是，您需要考虑取消提交（服务器上的图像无意更改它，因为用户离开表单而没有保存）。

我建议不要有额外的按钮来上传图片。 您应该有一个提交整个表单的提交按钮，其中图像只是表单的另一个属性。

或者......从仅用于图像上传的额外部分作为单独的部分。