如何制作自定义小部件以上传图像

Question

我正在创建可以上传图像并在窗口小部件面板中预览图像的窗口小部件，因此我使用JQuery将<intput type="file">中的URL添加到<img src"#">，但是它没有将URL传递给img，作为静态Html一切正常，但当我试图将它实现到WordPress它没有用。在控制台中没有显示任何错误。

可能是什么问题，或者有更简单的方法可以做到这一点？

function.php

public function form($instance) {

    $name_1 = $instance["name_1"];
    $name_2 = $instance["name_2"];
    $picture_1 = $instance["pic_1"];
    $picture_2 = $instance["pic_2"];

        ?>
        <label>Name:</label>
    <input type="text" name="<?php echo $this->get_field_name("name_1"); ?>" value="<?php echo esc_attr( $instance['name_1'] ); ?>"><br>
    <!--Upload Image-->
        <input name="<?php echo $this->get_field_name('pic_1'); ?>" type="file" value="<?php echo esc_attr($picture_1); ?>" id="imgInp"/>
        <img class="pic-preview" src="#" alt="Your image" style="width:120px;height:120px;background:#eee;display:block;" />



        <script>
        var $j = jQuery.noConflict();
        $j(document).ready(function() {
            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $j('.pic-preview').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            }

            $j("#imgInp").change(function(){
                readURL(this);
            });
    });

</script>

    <?php

}//form


    public function widget($args, $instance ) {
        <div class="profile-pics">
             <div class="col-sm-6">
                <div class='mfc-link'>
                    <img src='<?php echo esc_url( $instance['pic_1'] ) ?>'>
                </div>
                 <p><?php echo $instance["name_1"]; ?></p>
             </div>

        </div>
  <?php
    }
}