我如何使用带有多个图像上传按钮的 WordPress 媒体上传器答案

【问题标题】：How I can use WordPress Media Uploader with Multiple image upload Button我如何使用带有多个图像上传按钮的 WordPress 媒体上传器
【发布时间】：2018-09-07 05:51:28
【问题描述】：

我是 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.'">

任何帮助，一如既往，非常感谢。

【问题讨论】：

标签： javascript jquery wordpress media multifile-uploader

【解决方案1】：

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

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

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.'">

【讨论】：