如何在帖子中从Media-Upload获取图片URL？

时间：2011-03-05 作者：Guru 2.0

我在WordPress 3.1中为所有标准帖子生成了一个新的元数据库。在那里，我生成了一个输入：带有ID的文本字段_meta_fotos[pic], 它应该是标准媒体上传程序生成的图像url。我想从standard post窗口使用标准媒体上载程序。因此，我生成了以下JavaScript代码。

jQuery(document).ready(function() {
  jQuery(\'#_meta_fotos\\\\[pic\\\\]\').focusin(function() {
    formfield = jQuery(\'#_meta_fotos\\\\[pic\\\\]\').attr(\'name\');
    tb_show(\'\', \'media-upload.php?type=image&amp;TB_iframe=true\');
    return false;
  });
  window.send_to_editor = function(html) {
    imgURL = jQuery(\'img\',html).attr(\'src\');
    jQuery(\'#_meta_fotos\\\\[pic\\\\]\').val(imgURL);
    tb_remove();
  }
});

在第一步，一切正常。但我没有得到真正的图像URL。我得到的只是一个指向正确上传路径的URL和一个文件名blank.gif.

我检查了ThickBox是否由focusin-功能：没关系。

我认为问题在于send_to_editor-作用它返回html 来自参考底图主页的代码，而不是来自媒体上传器/thickbox的弹出窗口。

有人能帮我找出错误吗？非常感谢您的帮助！

2 个回复

最合适的回答,由SO网友:Guru 2.0 整理而成

我讨厌回答我自己的问题。但经过数小时的搜索和尝试，我找到了一个有效的解决方案。我提供这个解决方案，因为对于其他有同样问题的人来说，它不可能是有趣的。如果有更好的方法来解决这个问题，请进行讨论。也许它不是很优雅，但它很有效；-）

峰值是改变click-ThickBox中的“插入帖子”按钮事件。

edit因为代码只对库中的一个图像起作用，所以我让cto在click-作用现在它可以处理多张图片

jQuery(document).ready(function() {
  //change click event for insert into post
  (function(){ 
var tb_show_temp = window.tb_show; 
window.tb_show = function() { 
  tb_show_temp.apply(null, arguments); 
  var iframe = jQuery(\'#TB_iframeContent\');
  iframe.load(function() {
    var iframeDoc = iframe[0].contentWindow.document;
    var iframeJQuery = iframe[0].contentWindow.jQuery;
    var buttonContainer = iframeJQuery(\'td.savesend\');
    if (buttonContainer) {
      var btnSubmit = jQuery(\'input:submit\', buttonContainer);
      iframeJQuery(btnSubmit).click(function(){
        fldID = jQuery(this).attr(\'id\').replace(\'send\', \'\').replace(\'[\', \'\').replace(\']\', \'\');
        var imgurl = iframeJQuery(\'input[name="attachments\\\\[\'+fldID+\'\\\\]\\\\[url\\\\]"]\').val();
        jQuery(\'#_meta_fotos\\\\[pic\\\\]\').val(imgurl);
        jQuery(\'#picPreview\').attr(\'src\', imgurl);
        tb_remove();
      });
    }
  });
   }
  })()
//open uploader
jQuery(\'#_meta_fotos\\\\[pic\\\\]\').focusin(function() {
formfield = jQuery(\'#_meta_fotos\\\\[pic\\\\]\').attr(\'name\');
tb_show(\'Use pictures\', \'media-upload.php?type=image&amp;tab=library&amp;TB_iframe=1\');
return false;
});
});

SO网友:t31os

我为我帮助过的一个主题设置页面做了类似的事情，它看起来与您的有点不同，但我将发布代码，以便您进行比较。

jQuery:<从字面上讲，只是从我使用的工作脚本中提取的适用部分。

jQuery(document).ready( function($) {
    $(\'img.font\').click(function() {    
        form_field = $(this).next().next(\'input\'); 
        tb_show(\'\', \'media-upload.php?tab=type&from=t31os&post_id=0&TB_iframe=true\');
        return false;
    })
    .hover(function() {
        $(this).css({\'cursor\':\'pointer\'});
    }); 

    window.send_to_editor = function(html) {
        media_url = $(html).attr(\'href\');
        tb_remove();
        $(form_field).val(media_url);
    }
});

在我的例子中，我有一个触发上载窗口的图像，当用户单击Insert into settings 字段按钮（见下文）。

您会注意到，首先在媒体上传请求中传递了一个post ID，您应该需要它才能看到Insert into post 窗口中的按钮。其次，还有一个额外的请求参数from=t31os, 这允许我有选择地更改Insert into Post 文本，像这样。。

add_filter( \'gettext\', \'change_insert_into_post\', null, 2 );
function change_insert_into_post( $translation, $original ) {
    if( !isset( $_REQUEST[\'from\'] ) )
        return $translation;

    if( $_REQUEST[\'from\'] == \'t31os\' && $original == \'Insert into Post\' )
        return \'Insert into settings field\';

    return $translation;
}

希望这有帮助。

Follow-up from comments:
以下是在我的主题选项页面中工作的所提供代码的一些图像（箭头是触发上载程序的图像）。

The field
字段。

The uploader window
上传器窗口。

The result
结果。

您会注意到我没有使用gettext过滤器，这只是因为它不是代码功能的一部分（这是一种个人风格，在这里没有任何区别）。

您是否正确地将必要的脚本排入队列？惊人地media-upload 和thickbox, 以及thickbox样式表。

结束

小码农CODE

如何在帖子中从Media-Upload获取图片URL？

相关推荐

防止在每个页面上包含五个不同的jQuery副本