我正在开发媒体上传小部件。当我上传图像文件时,它会在管理页面中显示图像。在我刷新此页面之前,它将消失。检查后,我发现隐藏类是自动添加的。
我尝试谷歌搜索,只发现了保存小部件的问题(这与我的情况类似)。任何人都可以帮忙。
更多信息:它只在Firefox中工作。它在Chrome和IE中不起作用。(仅测试)
这是我的jQuery文件。
function renderMediaUploader() {
\'use strict\';
var file_frame, image_data, json;
/**
* If an instance of file_frame already exists, then we can open it
* rather than creating a new instance.
*/
if ( undefined !== file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media({
frame: \'post\',
state: \'insert\',
multiple: false
});
file_frame.on(\'insert\', function ()
{
$ = jQuery;
// Read the JSON data returned from the Media Uploader
json = file_frame.state().get(\'selection\').first().toJSON();
// First, make sure that we have the URL of an image to display
if (0 > $.trim(json.url.length))
{
return;
}
// After that, set the properties of the image and display it
$(\'.media-upload-container\')
.children(\'img.wp-post-image\')
.attr(\'src\', json.url)
.attr(\'alt\', json.caption)
.attr(\'title\', json.title)
.show()
.parent()
.removeClass(\'hidden\');
// Next, hide the anchor responsible for allowing the user to select an image
$(\'.media-upload-container\')
.prev()
.hide();
// Display the anchor for the removing the background image
$(\'.media-upload-container\')
.next()
.show()
// Store the image\'s information into the meta data fields.
$(\'.media\').val(json.url);
});
// Now display the actual file_frame
file_frame.open();
}
jQuery(document).ready(function($) {
\'use strict\';
$(function() {
$( \'.set-background-thumbnail\' ).on( \'click\', function( evt ) {
// Stop the anchor\'s default behavior
evt.preventDefault();
// Display the media uploader
renderMediaUploader();
});
$( \'.remove-background-thumbnail\' ).on( \'click\', function( evt ) {
// Stop the anchor\'s default behavior
evt.preventDefault();
// Remove the image, toggle the anchors
resetUploadForm( $ );
});
renderFeaturedImage( $ );
});
})
jQuery(document).ajaxSuccess(function (event, xhr, settings)
{
var widget_id_base = \'image_widget\';
if (settings.data !== "undefined")
{
if (settings.data.search(\'action=save-widget\') != -1 && settings.data.search(\'id_base=\' + widget_id_base) != -1)
{
\'use strict\';
$(function ()
{
$(\'.set-background-thumbnail\').on(\'click\', function (evt)
{
// Stop the anchor\'s default behavior
evt.preventDefault();
// Display the media uploader
renderMediaUploader();
});
$(\'.remove-background-thumbnail\').on(\'click\', function (evt)
{
// Stop the anchor\'s default behavior
evt.preventDefault();
// Remove the image, toggle the anchors
resetUploadForm($);
});
renderFeaturedImage($);
});
}
}
});
function resetUploadForm( $ ) {
\'use strict\';
// First, we\'ll hide the image
$( \'.media-upload-container\' )
.children( \'img.wp-post-image\' )
.hide();
// Then display the previous container
$( \'.media-upload-container\' )
.prev()
.show();
// Finally, we add the \'hidden\' class back to this anchor\'s parent
$( \'.media-upload-container\' )
.next()
.hide()
.addClass( \'hidden\' );
// Finally, we reset the meta data input fields
$( \'.media-upload-meta\' )
.children()
.val( \'\' );
}
function renderFeaturedImage( $ ) {
/* If a thumbnail URL has been associated with this image
* Then we need to display the image and the reset link.
*/
if ( \'\' !== $.trim ( $( \'.media\' ).val() ) ) {
$( \'.media-upload-container\' ).removeClass( \'hidden\' );
$( \'.set-background-thumbnail\' )
.parent()
.hide();
$( \'.remove-background-thumbnail\' )
.parent()
.removeClass( \'hidden\' );
}
}