我读了一些关于如何将媒体 uploader 集成到 WordPress 插件中的教程。我根据教程做了媒体 uploader 。
http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4
我这样做并且效果很好。当我多次尝试使用相同的脚本多次媒体 uploader 时,这是我尝试的 fiddle ,只是更改了特定文本字段的 ID。
http://jsfiddle.net/UrXPe/1/
尽管如此,当我点击上传时,一切都将变得完美。如果我点击 insert into post
唯一的事情图像的 url 出现在第二个浏览字段中。这是我所面对的屏幕截图。
当我在插入帖子后单击第一个上传字段(上传过程成功)时,相应的媒体网址出现在第二个字段而不是第一个字段中。我不确定问题出在哪里,任何建议都会很好。
最佳答案
已更新 - 向下滚动
经过大量的努力、研究和一些定制,我在下面编写了几行紧凑的代码,以便在 WordPress 的任何地方使用媒体 uploader 。只需将代码放入某个函数中,然后在任意位置调用该函数即可。 上传/选择文件的路径将被复制到文本框中,然后您就可以使用它。
// 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文件。这也删除了控制台警告。
关于jquery - 如何在wordpress插件中添加媒体 uploader ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17668899/