javascript - WordPress 自定义元框多图片上传

Question

我正在使用自定义帖子类型，其中添加了自定义元框。在自定义元框中，我尝试为多个图像添加媒体 uploader 。通过这个 uploader ，我想将多个图像 ID 存储在一个数组中。问题是我只能保存一个 ID，即使我选择了多个图像。

我真的希望有人能帮助我。

我的JS:

    jQuery(document).ready(function(){
  var addButton = document.getElementById('last-opp-bilde');
  var deleteButton = document.getElementById('fjern-bilde');
  var img = document.getElementById('image-tag');
  var hidden = document.getElementById('img-hidden-field');
  var imageUploader = wp.media({
    title: 'Velg bilde',
    button: {
      text: 'Bruk dette bildet'
    },
    multiple: true
  });

  addButton.addEventListener( 'click', function() {
    if (imageUploader) {
      imageUploader.open();
    }
  });

  imageUploader.on( 'select', function() {
    var attachment = imageUploader.state().get('selection').first().toJSON();
    img.setAttribute( 'src', attachment.url);
    img.setAttribute( 'style', 'width: 50%;');
    hidden.setAttribute( 'value', JSON.stringify( [ { id: attachment.id, url: attachment.url}]));
  });

  deleteButton.addEventListener( 'click', function(){
    img.removeAttribute( 'src' );
    hidden.removeAttribute( 'value' );
    img.removeAttribute( 'style' );
  });

  window.addEventListener( 'DOMContentLoaded', function(){
    img.setAttribute( 'src', imageUploads.imageData.src);
    img.setAttribute( 'style', 'width: 50%;');
    hidden.setAttribute('value', JSON.stringify( [imageUploads.imageData]));
  });
});

Answer 1

我实际上设法解决了这个问题。这是为我完成这项工作的 JS。

    jQuery(document).ready(function(){
  var addButton = document.getElementById('last-opp-bilde');
  //var deleteButton = document.getElementById('fjern-bilde');
  var img = document.getElementById('image-tag');
  var hidden = document.getElementById('img-hidden-field');
  var imageUploader = wp.media({
    title: 'Velg bilde',
    button: {
      text: 'Velg bilde(r)'
    },
    multiple: 'add'
  });

  addButton.addEventListener( 'click', function() {
    if (imageUploader) {
      imageUploader.open();
    }
  });

  imageUploader.on('open',function() {
    var selection = imageUploader.state().get('selection');
    ids = jQuery('#img-hidden-field-selected').val().split(',');
      ids.forEach(function(id) {
    attachment = wp.media.attachment(id);
    attachment.fetch();
    selection.add( attachment ? [ attachment ] : [] );
  });
  });

  imageUploader.on( 'close', function() {
    //var attachment = imageUploader.state().get('selection').first().toJSON();
    var attachment = imageUploader.state().get('selection');
    var ids = attachment.map( function (attachment) {
        return attachment.id;
    });
    hidden.setAttribute( 'value', ids.join(',') );
  });

  imageUploader.on( 'select', function() {
    //var attachment = imageUploader.state().get('selection').first().toJSON();
    var attachment = imageUploader.state().get('selection');
    var ids = attachment.map( function (attachment) {
        return attachment.id;
    });
    hidden.setAttribute( 'value', ids.join(',') );
  });
});