jQuery 如何在wordpress插件中添加媒体上传器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17668899/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add the media uploader in wordpress plugin
提问by Vignesh Pichamani
I read out some of the tutorial for how to integrate the media uploader in wordpress plugins. I do the media uploader based on the tutorial.
http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4I do this and it perfectly working. When i tried the same script again for multiple times of media uploader, Here is the fiddle i tried simply changed the id of the particular text field.
http://jsfiddle.net/UrXPe/1/Still when i click the upload all is to be to done perfect. only thing if i click insert into postit url of the image appear in the second browse field. Here is the screenshot what i face exactly.
我阅读了一些关于如何在 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 才会出现在第二个浏览字段中。这是我所面对的截图。
When i click the first upload field (uploading process are success) after insert into post that corresponding media url is appear in the second field not in first. I am not sure where is the problem any suggestion would be great.
当我插入帖子后单击第一个上传字段（上传过程成功）时，相应的媒体网址出现在第二个字段中而不是第一个。我不确定问题出在哪里，任何建议都会很棒。
回答by Rushabh Dave
UPDATED - scroll down
更新 - 向下滚动
After too much of hard work and research and some customization I coded below compact few lines of code to use media uploader anywhere in wordpress. Just put code in some function and call that function wherever you want. The path of uploaded/selected file will be copied to text-box and then you can use it.
经过太多的努力和研究以及一些定制，我在下面编写了几行代码，以便在 wordpress 的任何地方使用媒体上传器。只需将代码放入某个函数中，然后随时随地调用该函数即可。上传/选择文件的路径将被复制到文本框，然后您就可以使用它了。
Hope this helps someone.!
希望这对某人有帮助。！
// 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>
UPDATE: Just to add. You may need to add the function wrapper in your plugin/theme file. This is the following:
更新：只是添加。您可能需要在插件/主题文件中添加函数包装器。这是以下内容：
// UPLOAD ENGINE
function load_wp_media_files() {
wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
This will call the relevant JS files and CSS files if WP fails to load the upload manager. This also removes console warnings.
如果 WP 无法加载上传管理器，这将调用相关的 JS 文件和 CSS 文件。这也会删除控制台警告。
回答by Sumith Harshan
I'm using this method to use media uploader into my custom plugin.May be this would be help.
我正在使用这种方法将媒体上传器用于我的自定义插件。这可能会有所帮助。
in the main theme file(index.php)add these.
在主主题文件（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');
In the admin_script.jsfile,
在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 file(admin_settings.php),
管理文件（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;?>" width="65"/><?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" />
More details in my blog
更多细节在我的博客
回答by Rutunj sheladiya
Use this in your custom plugin
在您的自定义插件中使用它
<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>
