我首先按照this tutorial. 添加了图像上传器，尝试了一下，但我意识到这是一个旧版本的WP上传器。。。
于是我发现this post, 现在我的上传器更新了。
问题是，我无法使预览图像正常工作。。。
首先，这是元框详细信息的图像部分//
case \'image\':
$image = get_template_directory_uri().\'/images/image.png\';
echo \'<span class="custom_default_image" style="display:none">\'.$image.\'</span>\';
if ($meta) { $image = wp_get_attachment_image_src($meta, \'medium\'); $image = $image[0]; }
echo \'<label for="upload_image">
<input id="upload_image" name="\'.$field[\'id\'].\'" type="hidden" class="custom_upload_image" value="\'.$meta.\'" />
<img src="\'.$image.\'" class="custom_preview_image" alt="" />
<input id="upload_image_button" class="custom_upload_image_button button" type="button" value="Upload Image" /]
<a href="#" class="custom_clear_image_button">Remove Image</a>
</label>\';
break;
这是用于上载程序的代码//
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: false
});
//When a file is selected, grab the URL and set it as the text field\'s value
custom_uploader.on(\'select\', function() {
attachment = custom_uploader.state().get(\'selection\').first().toJSON();
$(\'#upload_image\').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
jQuery(\'.custom_clear_image_button\').click(function() {
var defaultImage = jQuery(this).parent().siblings(\'.custom_default_image\').text();
jQuery(this).parent().siblings(\'.custom_upload_image\').val(\'\');
jQuery(this).parent().siblings(\'.custom_preview_image\').attr(\'src\', defaultImage);
return false;
});
});
我尝试添加预览时，将这些行用于JS//
preview = jQuery(this).siblings(\'.custom_preview_image\');
window.send_to_editor = function(html) {
imgurl = jQuery(\'img\',html).attr(\'src\');
classes = jQuery(\'img\', html).attr(\'class\');
id = classes.replace(/(.*?)wp-image-/, \'\');
formfield.val(id);
preview.attr(\'src\', imgurl);
tb_remove();
}
return false;
因此，我的问题是，如何在自定义元框中为我的图像上传程序获得预览？
感谢您的帮助。
SO网友:cybmeta
我在javascript中看到了您的问题。我用wp的“关闭”事件做了类似的事情。媒体对象。您可以像实际操作一样使用“选择事件”，但我将主要针对模式窗口内的事件使用“on select”事件（但这只是首选项，如果需要，您可以使用“on select”）。
这里是我为您推荐的javascript代码。
jQuery(document).ready(function($){
var custom_uploader;
$(\'#insert-video-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({
title: \'Choose Image\',
button: {
text: \'Choose Image\',
},
multiple: false,
// If you pretent a function only for images you can limit the media elements only to images
library : { type : \'image\'}
});
//When close, grab the url of the image where needed
custom_uploader.on(\'close\', function() {
attachment = custom_uploader.state().get(\'selection\').first().toJSON();
$(\'#upload_image\').val(attachment.url);
$(\'.custom_preview_image\').attr("src", attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
此代码应与您在问题中发布的HTML代码配合使用。请注意，实际上它仅适用于一个图像，如果再次打开图像选择窗口并选择新图像，则以前的图像将替换为新选择的图像。
