仅将图像上传 url 应用于特定输入字段答案

【问题标题】：Only apply image upload url to specific input field仅将图像上传 url 应用于特定输入字段
【发布时间】：2016-11-15 07:09:22
【问题描述】：

我正在 WordPress 的自定义元框中创建自定义字段。我的输入文本字段、文本区域和复选框都可以正常工作。我还为正在运行的图片库添加了一个浏览按钮。

当您单击“浏览”按钮时，它会拉出 WordPress 媒体上传屏幕，当您选择该图像时，它将替换输入值（以及图像缩略图）。

这是 WordPress 元框设置的相关部分。

function show_custom_fields_meta_box() {
    global $post;  
    $meta = get_post_meta( $post->ID, 'custom_fields', true ); ?>
    <input type="hidden" name="custom_meta_box_nonce" value="<?php echo wp_create_nonce( basename(__FILE__) ); ?>">

    <!-- image upload field -->
    <p>
      <label for="custom_fields[image]">Image Upload</label><br>
      <input type="text" name="custom_fields[image]" id="custom_fields[image]" class="meta-image regular-text" value="<?php echo $meta['image']; ?>">
      <input type="button" class="button image-upload" value="Choose or Upload an Image">
      <div class="image-preview"><img src="<?php echo $meta['image']; ?>" style="max-width: 250px;"></div>
    </p>
 }

这是我用来打开 WordPress 媒体库并上传图片的 jQuery。

<script>
    /*
     * Attaches the image uploader to the input field
     */
    jQuery(document).ready(function ($) {

        // Instantiates the variable that holds the media library frame.
        var meta_image_frame;
        // Runs when the image button is clicked.
        $('.image-upload').click(function (e) {
            // Prevents the default action from occuring.
            e.preventDefault();

            var selected = $(this);
            var meta_image = $('.meta-image');

            // If the frame already exists, re-open it.
            if (meta_image_frame) {
                meta_image_frame.open();
                return;
            }
            // Sets up the media library frame
            meta_image_frame = wp.media.frames.meta_image_frame = wp.media({
                title: meta_image.title,
                button: {
                    text: meta_image.button
                }
            });
            // Runs when an image is selected.
            meta_image_frame.on('select', function () {
                // Grabs the attachment selection and creates a JSON representation of the model.
                var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
                // Sends the attachment URL to our custom image input field.
                $('.meta-image').val(media_attachment.url);

                var imgurl = $('.meta-image').val();

                $(selected).prev().val(imgurl);
                $(selected).closest('div').find('.image-preview').children('img').attr('src',imgurl);
            });
            // Opens the media library frame.
            meta_image_frame.open();
        });
    });
</script>

现在，这完全可以正常工作。 input 按钮具有 .image-upload 类，input 文本字段具有 meta-image 类。

但是，如果我添加另一个字段...(custom_fields[image2])

<p>
  <label for="custom_fields[image2]">Image Upload</label><br>
  <input type="text" name="custom_fields[image2]" id="custom_fields[image2]" class="meta-image regular-text" value="<?php echo $meta['image2']; ?>">
  <input type="button" class="button image-upload" value="Choose or Upload an Image">
  <div class="image-preview"><img src="<?php echo $meta['image2']; ?>" style="max-width: 250px;"></div>
</p>

jQuery 将应用于两个浏览按钮和文本输入，因为它是一个类。我知道（认为）我必须使用某种形式的$(this) 来获得正确的按钮和文本输入，但到目前为止我所有的努力都是徒劳的。

我试过$(this).closest('.meta-image')，但这似乎不起作用。

谢谢！

【问题讨论】：

标签： javascript php jquery wordpress upload

【解决方案1】：

我可以用这段代码做到这一点：

var meta_image = $(this).parent().children('.meta-image');

【讨论】：

【解决方案2】：

您可以在选择事件处理程序中使用变量 selected。

试试这个：

var metaImage = $(selected).closest('p').find('.meta-image),
    imgurl = $(metaImage).val();

【讨论】：