我已经设置了一个元框来保存我的客户可以输入的其他信息，它将出现在页面的不同部分。
页面显示在http://96.125.170.106/~prestonp/?project=360
数据显示在页面的右侧，但在该数据中，我希望包括显示在页面顶部和右顶部的照片，如下图所示
到目前为止，我已经在中添加了select图像系统，它可以正常工作。。。有点如果我只有一个设置，那一个工作得很好，如果我有两个设置，第二个就像预期的那样工作，但是第一个，当我点击“上传图像”并选择我的图像时，它会将图像url放在Thumb 1 而不是Main Image.
我很确定我的问题在jQuery中，但我对jQuery不是很了解。有人能帮我找出我的问题在哪里吗？我的代码如下。
<?php
function wp_gear_manager_admin_scripts() {
wp_enqueue_script(\'media-upload\');
wp_enqueue_script(\'thickbox\');
wp_enqueue_script(\'jquery\');
}
function wp_gear_manager_admin_styles() {
wp_enqueue_style(\'thickbox\');
}
add_action(\'admin_print_scripts\', \'wp_gear_manager_admin_scripts\');
add_action(\'admin_print_styles\', \'wp_gear_manager_admin_styles\');
?>
<script language="JavaScript">
jQuery(document).ready(function() {
jQuery(\'#upload_image_button_main\').click(function() {
formfield = jQuery(\'#_my_meta_upload_image_main\').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(\'#_my_meta_upload_image_main\').val(imgurl);
tb_remove();
}
});
</script>
<script language="JavaScript">
jQuery(document).ready(function() {
jQuery(\'#upload_image_button_1\').click(function() {
formfield = jQuery(\'#_my_meta_upload_image_1\').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(\'#_my_meta_upload_image_1\').val(imgurl);
tb_remove();
}
});
</script>
<div class="my_meta_control">
<p>Fill out this box to complete the project data section of the project page.</p>
<label>Project Name</label>
<p><input type="text" name="_my_meta[name]" value="<?php if(!empty($meta[\'name\'])) echo $meta[\'name\']; ?>"/></p>
<label>Project Location</label>
<p><input type="text" name="_my_meta[location]" value="<?php if(!empty($meta[\'location\'])) echo $meta[\'location\']; ?>"/></p>
<label>Project Client</label>
<p><input type="text" name="_my_meta[client]" value="<?php if(!empty($meta[\'client\'])) echo $meta[\'client\']; ?>"/></p>
<label>Project Data</label>
<p><input type="text" name="_my_meta[stories]" value="<?php if(!empty($meta[\'stories\'])) echo $meta[\'stories\']; ?>"/> <span>Stories</span><br />
<input type="text" name="_my_meta[units]" value="<?php if(!empty($meta[\'units\'])) echo $meta[\'units\']; ?>"/> <span>Units</span><br />
<input type="text" name="_my_meta[acres]" value="<?php if(!empty($meta[\'acres\'])) echo $meta[\'acres\']; ?>"/> <span>Acres</span><br />
<input type="text" name="_my_meta[unitsPerAcres]" value="<?php if(!empty($meta[\'unitsPerAcres\'])) echo $meta[\'unitsPerAcres\']; ?>"/> <span>Units/Acres</span><br />
<input type="text" name="_my_meta[website]" value="<?php if(!empty($meta[\'website\'])) echo $meta[\'website\']; ?>"/> <span>Website</span><br /><br /><br /><br />
<input id="_my_meta_upload_image_main" type="text" size="36" name="_my_meta[upload_image_main]" value="<?php if(!empty($meta[\'upload_image_main\'])) echo $meta[\'upload_image_main\']; ?>" /><input id="upload_image_button_main" type="button" value="Upload Image" /> <span>Main Image</span><br />
<input id="_my_meta_upload_image_1" type="text" size="36" name="_my_meta[upload_image_1]" value="<?php if(!empty($meta[\'upload_image_1\'])) echo $meta[\'upload_image_1\']; ?>" /><input id="upload_image_button_1" type="button" value="Upload Image" /> <span>Thumb 1</span><br />
<input id="_my_meta_upload_image_2" type="text" size="36" name="_my_meta[upload_image_2]" value="<?php if(!empty($meta[\'upload_image_2\'])) echo $meta[\'upload_image_2\']; ?>" /><input id="upload_image_button_2" type="button" value="Upload Image" /> <span>Thumb 2</span><br />
<input id="_my_meta_upload_image_3" type="text" size="36" name="_my_meta[upload_image_3]" value="<?php if(!empty($meta[\'upload_image_3\'])) echo $meta[\'upload_image_3\']; ?>" /><input id="upload_image_button_3" type="button" value="Upload Image" /> <span>Thumb 3</span><br />
<input id="_my_meta_upload_image_4" type="text" size="36" name="_my_meta[upload_image_4]" value="<?php if(!empty($meta[\'upload_image_4\'])) echo $meta[\'upload_image_4\']; ?>" /><input id="upload_image_button_4" type="button" value="Upload Image" /> <span>Thumb 4</span><br />
<input id="_my_meta_upload_image_5" type="text" size="36" name="_my_meta[upload_image_5]" value="<?php if(!empty($meta[\'upload_image_5\'])) echo $meta[\'upload_image_5\']; ?>" /><input id="upload_image_button_5" type="button" value="Upload Image" /> <span>Thumb 5</span><br />
<input id="_my_meta_upload_image_6" type="text" size="36" name="_my_meta[upload_image_6]" value="<?php if(!empty($meta[\'upload_image_6\'])) echo $meta[\'upload_image_6\']; ?>" /><input id="upload_image_button_6" type="button" value="Upload Image" /> <span>Thumb 6</span><br />
<input id="_my_meta_upload_image_7" type="text" size="36" name="_my_meta[upload_image_7]" value="<?php if(!empty($meta[\'upload_image_7\'])) echo $meta[\'upload_image_7\']; ?>" /><input id="upload_image_button_7" type="button" value="Upload Image" /> <span>Thumb 7</span><br />
<input id="_my_meta_upload_image_8" type="text" size="36" name="_my_meta[upload_image_8]" value="<?php if(!empty($meta[\'upload_image_8\'])) echo $meta[\'upload_image_8\']; ?>" /><input id="upload_image_button_8" type="button" value="Upload Image" /> <span>Thumb 8</span><br />
<input id="_my_meta_upload_image_9" type="text" size="36" name="_my_meta[upload_image_9]" value="<?php if(!empty($meta[\'upload_image_9\'])) echo $meta[\'upload_image_9\']; ?>" /><input id="upload_image_button_9" type="button" value="Upload Image" /> <span>Thumb 9</span></p>
</div>
SO网友:gliffen
这有点旧，但我需要将我的解决方案发布到某个地方。我所看到的所有地方都表明使用了Thickbox模式和媒体上传。php iframe。如果您想让插入图像像精选图像选择模式一样出现，这是错误的。您实际需要使用的是内置js类wp。媒体这是我已经实施的一个有效的解决方案。显然，你需要满足自己的需要。
这允许选择多个图像，然后每个函数处理结果。请参阅此链接以获取参考：https://codex.wordpress.org/Javascript_Reference/wp.media
javascript：
jQuery(function($){
var frame;
// ADD IMAGE LINK
$(\'#gmls_add_images\').on( \'click\', function( event ){
event.preventDefault();
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return;
}
// Create a new media frame
frame = wp.media({
title: \'Select or Upload Property Images\',
button: {
text: \'Add Images to property\'
},
multiple: true // Set to true to allow multiple files to be selected
});
// When an image is selected in the media frame...
frame.on( \'select\', function() {
// Get media attachment details from the frame state
var attachments = frame.state().get(\'selection\').toJSON();
$(attachments).each(function(key,attachment){
jQuery(\'#image_list\').append(\'<div class="image_box">\'+
\'<input type="hidden" name="images[]" value="\'+attachment.url+\'" />\'+
\'<img src="\'+attachment.url+\'" height="100px;" /><br>\'+
\'<a title="Remove Image" onclick="jQuery(this).parent().remove();">Remove Image</a>\'+
\'</div>\');
});
$(\'#TB_overlay\').trigger(\'click\');
});
// Finally, open the modal on click
frame.open();
});
});
html：
<input type="button" id="gmls_add_images" value="Add Images">
<div class="sortable" id="image_list"></div>
