在提交表格之前显示图片预览?

时间:2019-09-20 07:16:53

标签: javascript jquery wordpress

当我从图库中选择图像时。此图像显示了其预览,其中我在html中定义了图像预览标签。提交表单图像后,其图像将从预览中消失。

因此,我想提交表单之前显示的图像预览吗?

HTML

<tr class="form-field form-required">
                            <td colspan="2">
                                <tr class="form-field form-required">
                                    <th scope="row" ><label for="lcp-icon">Icon</label></th>
                                    <td>
                                        <img id="preview" src="<?php echo $image_url ?>" height="50px" width="150px"><br>
                                        <input id="image_url" type="text" size="30" name="image_url" value="<?php echo $image_url ?>" /><br/>
                                        <input type="button" class="button button-secondary" id="lcp_logo" name="lcp_logo" value="Select Image"><br />
                                    </td>
                                </tr>
                            </td>
                        </tr>

jQuery

jQuery(document).ready(function($) {

var image_custom_uploader;

jQuery("#lcp_logo").on("click", function(){

var image_custom_uploader = wp.media({

    title: "Upload Image",
    multiple: false
    }).open().on("select", function(e) {

        var attachment = image_custom_uploader.state().get("selection").first().toJSON();


         var url = '';
         url = attachment['url'];

         jQuery('#image_url').val(url);

         jQuery('#preview').attr("src", url);
        });
    });
});

PHP

     $uploadedlogofile = $_POST['image_url'];
                $icon = sanitize_text_field( $uploadedlogofile );

                if ( !empty($icon) ) {

                    delete_option( 'admin_icon'

     );     
                add_option( 'admin_icon', $icon);

            }

/*fetch all settings*/
        $icon = get_option('admin_icon',true);

我要提交表格之前显示的图像预览吗?

0 个答案:

没有答案