使图像字段成为必填项

Question

我正在尝试在 wordpress 中输入图片上传所需的输入。这个想法是上传图像，然后裁剪并保存。但是，由于输入标签发生变化（您可以看到 2 个输入，一个在上传之前，一个在上传之后），它们变成了样式 "hidden"，这使得代码无法聚焦并引发错误。

  <fieldset <?php if ($current_user->roles[0] == "contributor") {
                        # code...
                        echo "disabled";
                      } ?>>



                      <label for="postImage"><?php esc_html_e('ID Picture *:', ''); ?></label>

                        <?php esc_html_e('Image needs to be at least 250x250px', '');?>

                        <?php $baseurl = get_template_directory_uri().'/include/'; ?>

                         <div id="flash"></div>
                          <div id="ajaxresult">


                          </div>
                          <div id="files">
                          <?php
                          $photo_user = get_user_meta(get_current_user_id(), 'id_pic', true);?>
                          <?php
                          if (isset($photo_user)) {
                             echo "<img src='".esc_url($photo_user)."' id='uploadedimage' style='width:100%'>";
                          }  ?>
                         </div>
                        <span id="me" class="styleall button-small fileinput-button" style=" cursor:pointer;" >

                            <?php if(isset($photo_user)) {
                          esc_html_e('Click Here To Upload New Photo', '');
                        } else {
                          esc_html_e('Click Here To Upload Photo', '');
                        }
                        ?><input id="meimg" type="file" name="files[]" >

                        </span>


                        <div id="load"></div><span id="mestatus" ></span>


                        <div id="status"></div>
                        <div id="cropme" style="display:none;"><a class="button-small crop-me"><?php esc_html_e('CROP IMAGE', ''); ?></a></div>

                        <div id="cancelme0" style="display:none;"><a class="button-small"><?php esc_html_e('cancel', ''); ?></a></div>


                        <div id="cancelme" style="display:none;"><a class="button-small"><?php esc_html_e('cancel', 'fundingpress'); ?></a></div>
                                <br>
                             <input type="hidden" name="postImage" id="postImage" value="" />

                            </fieldset>

Answer 1

你必须确定何时显示第一个输入字段以及何时显示第二个输入字段并使用 if 语句控制它，或者定义一个布尔变量来决定如果为真则显示什么，如果为假则显示什么

 if(!isset($_POST["files"])){ 
    ?>
       <span id="me" class="styleall button-small fileinput-button" style=" cursor:pointer;" >
     <?php if(isset($photo_user)) {
                              esc_html_e('Click Here To Upload New Photo', '');
                            } else {
                              esc_html_e('Click Here To Upload Photo', '');
                            }
                            ?><input id="meimg" type="file" name="files[]" >
    }
    ?>
    </span>
    <?php
    else {
    ?>
       <div id="load"></div><span id="mestatus" ></span>


                            <div id="status"></div>
                            <div id="cropme" style="display:none;"><a class="button-small crop-me"><?php esc_html_e('CROP IMAGE', ''); ?></a></div>

                            <div id="cancelme0" style="display:none;"><a class="button-small"><?php esc_html_e('cancel', ''); ?></a></div>


                            <div id="cancelme" style="display:none;"><a class="button-small"><?php esc_html_e('cancel', 'fundingpress'); ?></a></div>
                                    <br>
                                 <input type="hidden" name="postImage" id="postImage" value="" />

                                </fieldset>

    <?php
    }
    ?>

Answer 2

我用 javascript 解决了这个问题。我将必需的属性添加到第一个输入，并在裁剪我按钮上，这意味着添加了图像，我在 onclick 操作后删除了必需的属性，如下所示：

<div id="cropme" style="display:none;"><a class="button-small crop-me" onclick="document.getElementById('meimg').required = false;">

使图像字段成为必填项

Make an image field required

html

php

wordpress

image

required