我正在尝试实现multiple 使用内置Wordpress媒体上传器在前端表单上上传图像。

我设法上传了一张图片，但我不知道如何上传multiple 图像字段。不幸的是，我对jQuery非常陌生。每当我使用多个<input> 字段Upload Image 按钮仅适用于第一个按钮。非常感谢您的帮助。

这是我的单幅图像上传的工作代码，我尝试将其调整为允许多幅<input> 字段/图像上载。

html frontend form

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

media-uploader.js

jQuery(document).ready(function($){

    var custom_uploader;

    $(\'#upload_image_button\').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: \'Choose Image\',
            button: {
                text: \'Choose Image\'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field\'s value
        custom_uploader.on(\'select\', function() {
            attachment = custom_uploader.state().get(\'selection\').first().toJSON();
            $(\'#upload_image\').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});

in functions.php

add_action(\'wp_enqueue_scripts\', \'media_uploader_script\');
function media_uploader_script() {
    if (is_page_template(\'page-item-submission.php\')) {
        wp_enqueue_media();
        wp_register_script(\'media-uploader-js\', get_template_directory_uri().\'/assets/js/media-uploader.js\', array(\'jquery\'));
        wp_enqueue_script(\'media-uploader-js\');
    }
}

这是我试图实现的屏幕截图（我知道“添加更多”按钮是另一种“问题”）。

编辑：

下面是我在史蒂文·琼斯的帮助下取得的成绩：

media-upload.js

jQuery(document).ready(function($){

    var custom_uploader;

    $(\'.upload_image_button\').click(function(e) {

     var target_input = $(this).attr(\'id\');

        e.preventDefault();


        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: \'Choose Image\',
            button: {
                text: \'Choose Image\'
            },
            multiple: false
        });

        //When a file is selected, grab the URL and set it as the text field\'s value
    custom_uploader.on(\'select\', function() {
    attachment = custom_uploader.state().get(\'selection\').first().toJSON();
    $(\'input[name=\' + target_input + \']\').val(attachment.url);
});

        //Open the uploader dialog
        custom_uploader.open();

    });


});

html frontend form

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="upload_image_button" type="button" value="Upload Image" />

然而，这两个字段中只有一个填充了我从媒体上传器中选择的输入。示例：我首先单击第二个按钮（image\\u 2），URL将填充到该字段中。之后，我单击第一个按钮（image\\u 1）：附件URL现在填充到第二个字段中，尽管它必须进入第一个字段。。。这没有道理。

<input type="text" size="36" name="image_1" value="http://" /> 
<input id="image_1" class="button upload_image_button" type="button" value="Upload Image" />

<input type="text" size="36" name="image_2" value="http://" /> 
<input id="image_2" class="button upload_image_button" type="button" value="Upload Image" />

$(\'.upload_image_button\').click(function(e) { 

var target_input = $(this).attr(\'id\');

custom_uploader.on(\'select\', function() {
    attachment = custom_uploader.state().get(\'selection\').first().toJSON();
    $(\'input[name=\' + target_input + \']\').val(attachment.url);
});