关键词：
【中文标题】如何在wordpress插件中添加媒体上传器[重复]【英文标题】：How to add the media uploader in wordpress plugin [duplicate] 【发布时间】：2013-07-14 04:23:13 【问题描述】：我阅读了一些关于如何将媒体上传器集成到 wordpress 插件中的教程。我根据教程做媒体上传器。
http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4
我这样做并且它完美地工作。当我为媒体上传器多次尝试相同的脚本时，这是我尝试的小提琴，只是更改了特定文本字段的 id。
http://jsfiddle.net/UrXPe/1/
仍然当我单击上传时，一切都将完美无缺。只有当我单击insert into post 时，图像的 url 才会出现在第二个浏览字段中。这是我所面对的截图。
当我在插入帖子后单击第一个上传字段（上传过程成功）时，相应的媒体 url 出现在第二个字段而不是第一个字段中。我不确定问题出在哪里，任何建议都会很好。
【问题讨论】：
【参考方案1】：已更新 - 向下滚动
经过大量的努力和研究以及一些定制，我在下面编写了几行紧凑的代码，以便在 wordpress 中的任何地方使用媒体上传器。只需将代码放入某个函数中，然后在您想要的任何地方调用该函数。 上传/选择文件的路径将被复制到文本框中，然后您就可以使用它了。
希望这对某人有所帮助。！
// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
?>
<div>
<label for="image_url">Image</label>
<input type="text" name="image_url" id="image_url" class="regular-text">
<input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
</div>
<script type="text/javascript">
jQuery(document).ready(function($)
$('#upload-btn').click(function(e)
e.preventDefault();
var image = wp.media(
title: 'Upload Image',
// mutiple: true if you want to upload multiple files at once
multiple: false
).open()
.on('select', function(e)
// This will return the selected image from the Media Uploader, the result is an object
var uploaded_image = image.state().get('selection').first();
// We convert uploaded_image to a JSON object to make accessing it easier
// Output to the console uploaded_image
console.log(uploaded_image);
var image_url = uploaded_image.toJSON().url;
// Let's assign the url value to the input field
$('#image_url').val(image_url);
);
);
);
</script>
更新：只是添加。您可能需要在插件/主题文件中添加函数包装器。这是以下内容：
// UPLOAD ENGINE
function load_wp_media_files()
wp_enqueue_media();
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
如果 WP 无法加载上传管理器，这将调用相关的 JS 文件和 CSS 文件。这也消除了控制台警告。
【讨论】：
感谢您的回答。我在弹出窗口中尝试过，但没有成功：***.com/questions/30500327/…. 好东西。工作无忧。 您好，您能告诉我如何将此图像路径存储到 word press 数据库并稍后检索此图像 感谢 user3337553！ @rupesh 将其存储为自定义选项，在这里查看 tinyurl.com/pz3v9jx 绝妙的答案！如果挣扎也添加上述功能【参考方案2】：我正在使用这种方法在我的自定义插件中使用媒体上传器。也许这会有所帮助。
在主主题文件(index.php)中添加这些。
wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload');
// load script to admin
function wpss_admin_js()
$siteurl = get_option('siteurl');
$url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
echo "<script type='text/javascript' src='$url'></script>";
add_action('admin_head', 'wpss_admin_js');
在 admin_script.js 文件中，
jQuery('#wpss_upload_image_button').click(function()
formfield = jQuery('#wpss_upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
);
window.send_to_editor = function(html)
imgurl = jQuery('img',html).attr('src');
jQuery('#wpss_upload_image').val(imgurl);
tb_remove();
jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
管理文件（admin_settings.php），
<div id="wpss_upload_image_thumb" class="wpss-file">
<?php if(isset($record->security_image) && $record->security_image !='') ?>
<img src="<?php echo $record->security_image;?>" /><?php else echo $defaultImage; ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" />
更多详情in my blog
【讨论】：
你如何使用它进行多次上传？ 您可以按照此说明进行操作。***.com/questions/17320802/… 知道如何在弹出窗口中纠正我的情况，@SumithHarshan？ ***.com/questions/30500327/… thickbox 已弃用，不应使用。【参考方案3】：在您的自定义插件中使用它
<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>
<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');
function my_admin_scripts()
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page')
wp_enqueue_media();
wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
wp_enqueue_script('my-admin-js');
?>
<script>
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: true
);
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function()
console.log(custom_uploader.state().get('selection').toJSON());
attachment = custom_uploader.state().get('selection').first().toJSON();
$('#upload_image').val(attachment.url);
);
//Open the uploader dialog
custom_uploader.open();
);
);
</script>
【讨论】：
带有大小选择的 WordPress 媒体上传器
】带有大小选择的WordPress媒体上传器【英文标题】：WordPressMediaUploaderwithsizeselect【发布时间】：2013-12-0419:09:04【问题描述】：我想将图像输入添加到我自己的WordPress插件中。为此，我使用标准的WordPress媒体上传器，如下所示：var... 查看详情
WordPress：如何在编辑表单中添加图片上传按钮？
】WordPress：如何在编辑表单中添加图片上传按钮？【英文标题】：WordPress:howtoaddanimageuploadbuttontotheeditform?【发布时间】：2014-02-2714:23:30【问题描述】：我想在WordPress编辑表单中添加图片上传按钮并检索上传媒体的ID。如果可能的... 查看详情
Wordpress 媒体上传器无法正确上传
】Wordpress媒体上传器无法正确上传【英文标题】：Wordpressmediauploadernotuploadingproperly【发布时间】：2012-09-0413:38:27【问题描述】：我正在通过Wordpress媒体上传器上传媒体。它说它可以很好地上传文件（如果我检查我的上传文件夹，... 查看详情
将wordpress媒体上传器集成到插件中
It'sa3partprocess,firstisthePHPthatyouneedtorun,whichincludestheappropriatescriptsandstylesintotheadminheader,thenyouneedanhtmlbuttonandinputfieldtoputthestoredvaluein,thenyouneedsomejQuerytoopenthepopupandgettheappropriateinformationfromit(thencloseitagain).Theremoreinformationonimplementation... 查看详情
wp.media undefined 使用 Wordpress 媒体上传器
】wp.mediaundefined使用Wordpress媒体上传器【英文标题】：wp.mediaundefinedusingWordpressMediaUploader【发布时间】：2017-06-0609:57:51【问题描述】：编辑：脚本的其他变体似乎也不起作用，wp_enqueue_media()没问题，但看起来包含wp.media的脚本... 查看详情
如何在 WP 中组织上传的媒体？
...ediainWP?【发布时间】：2013-03-2003:37:52【问题描述】：我是WordPress新手，来自Joomla。我怎样才能（如果我能做到...）使用WordPress将上传的媒体组织到文件夹和子文件夹中？如果我进入我的后端管理面板，我有Media子面板，我可以在... 查看详情
使用 wp 媒体上传器上传文件路径未显示在字段中
...在我的插件中使用自定义mediaupload。在我之前的(before4.0)WordPress版本中，它运行良好。当我上传音频或图像文件时，它的上传成功当我点击"InsertIntoPost"时 查看详情
php将复选框自定义元字段添加到媒体上传器wordpress(代码片段)
无法通过 Wordpress 上传器上传媒体
】无法通过Wordpress上传器上传媒体【英文标题】：CannotuploadmediaviaWordpressuploader【发布时间】：2011-02-2714:53:10【问题描述】：这与Wordpress中的媒体上传有关。每次WP为新上传创建一个文件夹（它按年和月组织上传：yyyy/mm），它使... 查看详情
php重力形成多文件上传器字段到wordpress媒体附件并添加到cpt的元(代码片段)
像 WordPress 媒体上传器这样的 PHP 媒体管理器？
】像WordPress媒体上传器这样的PHP媒体管理器？【英文标题】：PHPMediaManagerlikeWordPressMediaUploader?【发布时间】：2013-10-2009:15:45【问题描述】：我只是喜欢Wordpress让照片和媒体的上传和管理变得如此轻松。我想在我的非WORDPRESSPHP网站... 查看详情
黄聪：如何使用钩子定制wordpress添加媒体界面，去除不需要的元素
原文：http://www.solagirl.net/customize-wordpress-media-upload-ui.htmlWordPress编写文章界面的添加媒体按钮允许用户上传多媒体文件，但并不是每个人都能用的顺手，有的人倾向于引用外部图片，所以希望“从URL上传”这一项是默认选中... 查看详情
html如何在wordpress主题中添加社交媒体共享链接(代码片段)
需要一种方法来更改 wordpress 媒体上传器 div TB_window css
】需要一种方法来更改wordpress媒体上传器divTB_windowcss【英文标题】：needawaytochangethewordpressmediauploaderdivTB_windowcss【发布时间】：2011-11-2801:14:25【问题描述】：再次为这个问题道歉，我的最后一个问题问得不好，代码丢失了。我的... 查看详情
图片上传管理器
...布时间】：2016-02-0814:36:20【问题描述】：我正在尝试基于Wordpress媒体管理器为我的CMS构建图像管理器。CMS正在Yii2中开发。现在我可以上传和查看所有上传的图片。我接下来想要的是能够添加自定义按钮（上传徽标、上传标题等... 查看详情
Wordpress 在插件中选择和裁剪
】Wordpress在插件中选择和裁剪【英文标题】：Wordpressselectandcropinplugin【发布时间】：2015-06-1507:47:41【问题描述】：我需要在我的插件中上传图片并使用wp.media来完成这项任务。根据https://codex.wordpress.org/Javascript_Reference/wp.media它的... 查看详情
在没有 WordPress 插件的情况下重新生成缩略图
】在没有WordPress插件的情况下重新生成缩略图【英文标题】：RegeneratethumbnailswithoutaWordPressplugin【发布时间】：2021-08-0120:28:14【问题描述】：我正在开发我的第一个WordPress插件，并且我添加了新的图片尺寸，用户可以选择这些尺... 查看详情
覆盖 WordPress 媒体上传器的 saveCompat
】覆盖WordPress媒体上传器的saveCompat【英文标题】：OverridesaveCompatforWordPressMediaUploader【发布时间】：2014-08-1709:54:56【问题描述】：我是Backbone的新手，所以不明白我做错了什么。我需要的是覆盖saveCompat（media-models.jsline310，WP3.9.1... 查看详情