使用jQuery插入不适用于音频文件的帖子

时间：2019-05-18 作者：Kevin W.

我正在尝试将媒体库中的音频url插入到自定义元数据库中的字段中。我使用jQuery做了一个类似的操作，但取而代之的是抓取一个图像url，这非常有效。但由于某些原因，在尝试获取音频url时，它不起作用。以下是我的自定义元数据库中的字段，下面是我尝试使用的jQuery：

Metabox Code

 <tr>
        <th>MP4 File Location:</th>
        <td><input type="text" name="sermon_mp4" id="sermon_mp4" value="<?php echo $sermonmp4; ?>" />
          <input type="button" id="sermon_mp4_button" value="Add Sermon Audio" />
        <p>
        (used only in admin area, when creating a new Sermon)
        </p>
        </td>
        </tr>

        <tr>
        <th>Sermon PDF Location:</th>
        <td><input type="text" name="sermon_pdf" id="sermon_pdf" value="<?php echo $sermonpdf; ?>" />
            <input type="button" id="sermon_pdf_button" value="Add File" />
        <p>
        (used only in admin area, when creating a new Sermon)
        </p>
        </td>
  </tr>

jQuery Code

   <script>
    jQuery(document).ready( function($) {
      jQuery(\'#sermon_mp4_button\').click(function() {
        window.send_to_editor = function(html) {
          imgurl = jQuery(html).attr(\'src\')
          jQuery(\'#sermon_mp4\').val(imgurl);
          jQuery(\'#picsrc\').attr("src", imgurl);
          tb_remove();
        }

        formfield = jQuery(\'#sermon_mp4\').attr(\'name\');
        tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\' );
        return false;
      }); // End on click
    });
    jQuery(document).ready( function($) {
      jQuery(\'#sermon_pdf_button\').click(function() {
        window.send_to_editor = function(html) {
          imgurl = jQuery(html).attr(\'src\')
          jQuery(\'#sermon_pdf\').val(imgurl);
          jQuery(\'#picsrc\').attr("src", imgurl);
          tb_remove();
        }

        formfield = jQuery(\'#sermon_pdf\').attr(\'name\');
        tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\' );
        return false;
      }); // End on click
    });
    </script>

1 个回复
最合适的回答,由SO网友:Kevin W. 整理而成

我已经想出了更好的和新的工作版本，支持所有文件类型，我将在这里分享，以防其他人正在寻找这个答案。

已将输入字段添加到metabox

<input type="text" name="sermon_mp4" id="sermon_mp4" value="<?php echo $sermonmp4; ?>"/>
<input type="button" id="sermon_mp4_button" value="Add Sermon Audio" />

jQuery

<script type = "text/javascript">
    // Uploading files
    var file_frame;
jQuery(\'#sermon_mp4_button\').live(\'click\', function(podcast) {
    podcast.preventDefault();
    // If the media frame already exists, reopen it.
    if (file_frame) {
        file_frame.open();
        return;
    }
    // Create the media frame.
    file_frame = wp.media.frames.file_frame = wp.media({
        title: jQuery(this).data(\'uploader_title\'),
        button: {
            text: jQuery(this).data(\'uploader_button_text\'),
        },
        multiple: false // Set to true to allow multiple files to be selected
    });
    // When a file is selected, run a callback.
    file_frame.on(\'select\', function(){
        // We set multiple to false so only get one image from the uploader
        attachment = file_frame.state().get(\'selection\').first().toJSON();
        var url = attachment.url;
        var field = document.getElementById("sermon_mp4");
        field.value = url; //set which variable you want the field to have
    });
    // Finally, open the modal
    file_frame.open();
});

最后需要做的是包括wp\\u enqueue函数

function asp_admin_scripts() {
wp_enqueue_script(\'media-upload\');
wp_enqueue_script(\'thickbox\');
}

function asp_admin_styles() {
    wp_enqueue_style(\'thickbox\');
}
add_action(\'admin_print_scripts\', \'asp_admin_scripts\');
add_action(\'admin_print_styles\', \'asp_admin_styles\');
}
如果元数据库中有多个字段需要使用媒体上载程序，只需从上面的jQuery中删除此文本并复制代码

// If the media frame already exists, reopen it.
if (file_frame) {
    file_frame.open();
    return;
}

标签： plugin-development   jquery   javascript   小码农  

相关推荐

带有jQuery的视频海报中的ACF中继器图像

jquery无法将url从图像发送到html标记。我解释；我有一个带有5个变量的ACF中继器，其中包括一个用于制作视频海报的图像，我想做的是，通过jquery，在900px的较小屏幕中，将属性“海报”添加到视频标签中。这是我的代码：<div class=\"video\"> <video class=\"thevideo\" loop muted> <source src=\"<?php echo $previews