Die Vorschau des hochgeladenen Bildes kann nicht in einem benutzerdefinierten Meta-Feld angezeigt werden

Ich folgte zuerst den Schritten in diesem Tutorial . Ich habe den Image Uploader hinzugefügt, es ausprobiert, aber ich habe festgestellt, dass es sich um eine ältere Version des WP Uploaders handelt …

Also habe ich diesen Post gefunden , und jetzt ist mein Uploader aktualisiert.

Das Problem ist, dass das Vorschaubild nicht funktioniert …

Zuallererst ist dies der Image-Bereich für die Meta-Box-Details //

case 'image': $image = get_template_directory_uri().'/images/image.png'; echo 'https://wordpress.stackexchange.com/questions/106347/unable-to-get-preview-of-uploaded-image-within-a-custom-meta-box/'.$image.''; if ($meta) { $image = wp_get_attachment_image_src($meta, 'medium'); $image = $image[0]; } echo ''; break; 

Dies ist der Code, der für den Uploader verwendet wird //

 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; }); }); 

Mein Versuch, die Vorschau hinzuzufügen, verwendete diese Zeilen für 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; 

Meine Frage wäre also, wie kann ich eine Vorschau für meinen Image Uploader innerhalb einer Custom Meta Box erstellen?

Alle Hilfe geschätzt, Danke.

Solutions Collecting From Web of "Die Vorschau des hochgeladenen Bildes kann nicht in einem benutzerdefinierten Meta-Feld angezeigt werden"

Ich sehe dein Problem im Javascript. Ich habe etwas Ähnliches mit dem “on close” -Ereignis des wp.media-Objekts gemacht. Sie können das “select event” verwenden, wie Sie es tatsächlich tun, aber ich würde “on select” -Ereignis hauptsächlich für Ereignisse im modalen Fenster verwenden (aber es ist nur eine Vorliebe, Sie können das “on select” verwenden, wenn Sie möchten) .

Hier mein vorgeschlagener JavaScript-Code für Sie.

  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(); }); }); 

Dieser Code sollte mit dem HTML-Code funktionieren, den Sie in der Frage angegeben haben. Beachten Sie, dass es tatsächlich nur für EIN Bild funktioniert. Wenn Sie das Bildauswahlfenster erneut öffnen und ein neues Bild auswählen, wird das vorherige Bild durch das neue ausgewählte Bild ersetzt.