媒体上载后自动填充图像

时间:2013-01-21 作者:Rob Myrick

我正在尝试使用本机Wordpress媒体上载程序自动填充主题页上的图像,但我希望在保存选项之前填充图像。使用下面的代码,图像的url将正确填充到input 字段,但我不知道如何显示图像:

<td>
  <label for="upload_image">
      <input style="float:left; width:80%" id="upload_image" type="text" name="upload_image" value="<?php echo $options[\'upload_image\']; ?>" />
      <input style="float:right" id="upload_image_button" type="button" value="Upload Image" />
  <br/>

  <img id="upload_image" name="upload_image" src="<?php if ($options[\'upload_image\'] != "" ) { echo $options[\'upload_image\']; } ?>" />
  </label>

</td>
添加的代码:

以下是#upload\\u image\\u按钮的脚本

jQuery(document).ready(function() {

jQuery(\'#upload_image_button\').click(function() {
 formfield = jQuery(\'#upload_image\').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(\'#upload_image\').val(imgurl);
 tb_remove();
}

});

1 个回复
最合适的回答,由SO网友:brasofilo 整理而成

在将图像URL发送到编辑器的同一个调用中,使用图像源填充另一个div。

例如:

window.send_to_editor = function(html) 
{
    imgurl = jQuery(\'img\',html).attr(\'src\');
    jQuery(\'#upload_image\').val(imgurl);
    imgsrc = \'<img id="upload_image" name="upload_image" src="\'+imgurl+\'">\';
    jQuery(\'#image-holder\').html(imgsrc);
    tb_remove();
}
PS:这是针对旧的Thickbox的,而不是针对新的3.5上传器,现在很少有这样的例子

[更新]
在原始主题页代码中,图像应包装在:

<div id="image-holder"><img id="upload_image" name="upload_image" src="<?php if ($options[\'upload_image\'] != "" ) { echo $options[\'upload_image\']; } ?>" /></div>

结束

相关推荐

How to use Plupload in themes

我正在开发一个需要从前端上传的主题。我想将plupload整合到我的主题中,同时牢记:上传将在表单提交时处理,而不是通过plupload常规方法。这意味着我只需要plupload的设计,而不是上传功能。选择文件后,当我提交表单(包含所选文件和其他信息)时,我应该能够获取目标页面中的所有表单信息(包括文件信息)。E、 g.在用户配置文件页面中,我想更新我的头像以及其他信息</如有任何帮助,我们将不胜感激。