Javascript 从媒体库中选择图像后，如何在wordpress中获得图像预览

这是WordPress插件，我想在从媒体库中选择图像后预览图像

   $my_saved_attachment_post_id = get_option('media_selector_attachment_id',0);
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            //uploading files
            var file_frame;
            var wp_media_post_id = wp.media.model.settings.post.id;//store the old id
            var set_to_post_id = <?php echo $my_saved_attachment_post_id;?>;

            jQuery('#upload_image_button').on('click', function (event) {

                event.preventDefault();

                //if the media frame already exists, reopen it
                if (file_frame){
                    //set the post id to what we want
                    file_frame.uploader.uploader.param('post_id', set_to_post_id);
                    //open frame
                    file_frame.open();
                    return;
                } else {
                    wp.media.model.settings.post.id = set_to_post_id;
                }
                //create the media frame
                file_frame = wp.media.frames.file_frame = wp.media({
                    title: 'Select a image to upload',
                    button: {
                        text: 'Use this image',
                    },
                    multiple:false

                });

                file_frame.on('select', function () {
                    attachment = file_frame.state().get('selection').first().toJSON();

                    $('#image-preview').attr('src',attachment.url).css('width','auto');
                    $('#image-attachment-id').val(attachment.id);

                    wp.media.model.settings.post.id = wp_media_post_id;
                });
                file_frame.open();
            });
            jQuery('a.add-media').on('click', function(){
                wp.media.model.settings.post.id = wp_media_post_id;
            });

        });

    </script>



 if (isset($_POST['save-details']) && isset($_POST['image-attachment-id'])):
        update_option('media_selector_attachment_id', absint($_POST['image-attachment-id']));
    endif;



  <div class="img-preview-wrapper">
  <img id="img-preview" src="<?php echo wp_get_attachment_url(get_option('media_selector_attachment_id')); ?>" height="100px"/>
    </div><br>
   <input id="upload_image_button" type="button" class="btn btn-default btn-lg" value="Upload Image"/>
    <input type="hidden" name="image-attachment-id" id="image-attachment-id" value="<?php echo get_option('media_selector_attachment_id'); ?>"/>
    <input type="submit" name="save-details" value="Save" class="btn btn-default btn-lg"/>

$my\u saved\u attachment\u post\u id=get\u选项（'media\u selector\u attachment\u id'，0）；
?>
jQuery（文档）.ready（函数（$）{
//上传文件
var文件框架；
var wp_media_post_id=wp.media.model.settings.post.id；//存储旧id
var设置_为_post_id=；
jQuery（“#上传(图像)按钮”）。在（'click'，函数（事件）{
event.preventDefault（）；
//如果媒体框已存在，请重新打开它
if（文件帧）{
//将post id设置为我们想要的
文件\u frame.uploader.uploader.param（'post\u id'，将\u设置为\u post\u id）；
//开架
文件_frame.open（）；
返回；
}否则{
wp.media.model.settings.post.id=将_设置为_post_id；
}
//创建媒体框
file_frame=wp.media.frames.file_frame=wp.media({
标题：“选择要上载的图像”，
按钮：{
文本：“使用此图像”，
},
多重：假
});
文件\u frame.on（'select'，函数（）{
附件=file_frame.state（）.get（'selection'）.first（）.toJSON（）；
$（“#图像预览”）.attr（'src'，attachment.url）.css（'width'，'auto'）；
$（'#图像附件id'）.val（附件.id）；
wp.media.model.settings.post.id=wp\u media\u post\u id；
});
文件_frame.open（）；
});
jQuery（'a.add-media'）。在（'click'，function（）上{
wp.media.model.settings.post.id=wp\u media\u post\u id；
});
});
如果（isset（$_POST['save-details']）和&isset（$_POST['image-attachment-id']）：
更新选项（'media_selector_attachment_id'，absint（$_POST['image-attachment-id'））；
endif；
“height=”100px“/>