无法在自定义元框中获取上载图像的预览

时间：2013-07-13 作者：keilowe

我首先按照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;
因此，我的问题是，如何在自定义元框中为我的图像上传程序获得预览？

感谢您的帮助。

1 个回复
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代码配合使用。请注意，实际上它仅适用于一个图像，如果再次打开图像选择窗口并选择新图像，则以前的图像将替换为新选择的图像。

结束
标签： custom-field   metabox   javascript   advanced-custom-fields   previews   小码农  

相关推荐

update_option in javascript

因此，wordpress中有一个功能可以将命名选项/值对更新到选项数据库表中：<?php update_option( $option, $new_value ); ?>. 我正试图用javascript实现这个功能，这样当你点击页面底部时，一个选项就会更新。我使用此脚本检查您何时点击页面底部：$(window).scroll(function () { if ($(window).scrollTop() >= $(document).height() - $(window

无法在自定义元框中获取上载图像的预览 - 小码农CODE - 行之有效找到问题解决它

无法在自定义元框中获取上载图像的预览

时间：2013-07-13 作者：keilowe

我首先按照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;
因此，我的问题是，如何在自定义元框中为我的图像上传程序获得预览？

感谢您的帮助。

1 个回复
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代码配合使用。请注意，实际上它仅适用于一个图像，如果再次打开图像选择窗口并选择新图像，则以前的图像将替换为新选择的图像。

标签： custom-field   metabox   javascript   advanced-custom-fields   previews   小码农  

相关推荐

尝试仅在PODS类别/自定义帖子类型内的页面上加载JavaScript

我想加载CSS，但只在某些页面上加载。这段代码通常工作得很好，但我无法确定“条件标记”是什么只会加载这些页面。这是我在函数中放置的函数。php文件：//Below loads JS ONLY for the main directory pages function directory_scripts () { if ( *** NOT SURE *** ): wp_enqueue_style( \'addev