我如何使用带有多个图像上传按钮的 WordPress Media Uploader

Question

我是 jQuery 的初学者，使用 WordPress Media Uploader 实现的多图像上传按钮无法正常工作，我需要知道如何做正确的事情。

这是我的代码：Javascript/jQuery 用于显示媒体上传器和处理所选图像：

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

var mediaUploader;

$('#upload-button').on('click',function(e) {
    e.preventDefault();
    if( mediaUploader ){
        mediaUploader.open();
        return;
    }

  mediaUploader = wp.media.frames.file_frame =wp.media({
    title: 'Choose a Hotel Picture',
    button: {
        text: 'Choose Picture'
    },
    multiple:false
  });

  mediaUploader.on('select', function(){
    attachment = mediaUploader.state().get('selection').first().toJSON();
    $('#profile-picture').val(attachment.url);
    $('#profile-picture-preview').css('background-image','url(' + attachment.url + ')');
  });
  mediaUploader.open();
}); });




<input type="button" id="upload-button1" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture.'">

<input type="button" id="upload-button2" class="button button-secondary" value="Upload Profiel Picture">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture.'">

一如既往的任何帮助，我们将不胜感激。

Answer 1

您只需将选择器的 ID 更改为类即可使媒体上传器可用于不同的按钮。

然后，您需要创建一个标识符，以便使用正确的输入字段来设置图像。就我而言，我使用了数据属性。

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

var mediaUploader;

$('.upload-button').on('click',function(e) {
    e.preventDefault();
    var buttonID = $(this).data('group');

    if( mediaUploader ){
        mediaUploader.open();
        return;
    }

  mediaUploader = wp.media.frames.file_frame =wp.media({
    title: 'Choose a Hotel Picture',
    button: {
        text: 'Choose Picture'
    },
    multiple:false
  });

  mediaUploader.on('select', function(){
    attachment = mediaUploader.state().get('selection').first().toJSON();
    $('#profile-picture'+buttonID).val(attachment.url);
    $('#profile-picture-preview'+buttonID).css('background-image','url(' + attachment.url + ')');
  });
  mediaUploader.open();
}); });




<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="1">
<input type="hidden" name="profile_picture1" id="profile-picture1" value="'.$picture1.'">

<input type="button" class="button button-secondary upload-button" value="Upload Profile Picture" data-group="2">
<input type="hidden" name="profile_picture2" id="profile-picture2" value="'.$picture2.'">

Answer 2

我稍微更新了 jquery 代码，所以这对我有用。

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

            // Uploading files
            var mediaUploader;

            $('.upload_button').on('click', function( event ){

                event.preventDefault();

                var buttonID = $(this).data('id');

                // If the media frame already exists, reopen it.
                if ( mediaUploader ) {
                    // Open frame
                    mediaUploader.id = buttonID;
                    mediaUploader.open();
                    return;
                }

                // Create the media frame.
                mediaUploader = wp.media.frames.file_frame = wp.media({
                    id: buttonID,
                    title: 'Select a file to upload',
                    button: {
                        text: 'Select',
                    },
                    multiple: false // Set to true to allow multiple files to be selected
                });

                // When an image is selected, run a callback.
                mediaUploader.on( 'select', function() {
                    // We set multiple to false so only get one image from the uploader
                    attachment = mediaUploader.state().get('selection').first().toJSON();

                    // Do something with attachment.id and/or attachment.url here
                    $( '#file-preview_' + mediaUploader.id ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                    $( '#file_attachment_' + mediaUploader.id ).val( attachment.id );
                });

                // Finally, open the modal
                mediaUploader.open();
            });

        });

image

我如何使用带有多个图像上传按钮的 WordPress Media Uploader

How I can use WordPress Media Uploader with Multiple image upload Button

javascript

media

wordpress

jquery

multifile-uploader