我正在尝试使用本机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&TB_iframe=true\');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery(\'img\',html).attr(\'src\');
jQuery(\'#upload_image\').val(imgurl);
tb_remove();
}
});
最合适的回答,由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>