laravel 表单上传图像和使用 jquery 进行实时预览似乎坏了

Question

这是我的 laravel 来自

<label><b>User Profile Picture <i class="ik ik-alert-circle" style="color: orange" data-toggle="tooltip" 
                                        data-placement="top" title="If dont have doctor profile picture upload dummy picture"></i></b>
                                        <span class="text-danger">*</span></label>
                                    <input type="file" class="file-upload-default" name="image">
                                    <div class="input-group col-xs-12">
                                        <input type="text" class="form-control file-upload-info" disabled placeholder="Upload Image">
                                        <span class="input-group-append">
                                        <button class="file-upload-browse btn btn-primary" type="button">Upload</button>
                                        </span>
                                    </div>

这是一个预览 div

 <div class="col-md-6">
                                <img id="showimage" src=""
                                    style="width: 100px; height: 100px;"
                                    >
                            </div>

这是我的脚本

  <script type="text/javascript">

        $(document).ready(function () {
            console.log("hello");
            $('#image').change(function(e) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('#showimage').attr('src',e.target.result);
                }
                reader.readAsDataURL(e.target.files['0']);
            });
        });
        
      </script>

imge 中上传的任何内容我都想预览showimage 中的内容但无法正常工作，您能帮忙解决这个问题吗？

注意：添加了 Jquesy cdn 并按预期工作

Answer 1

文件输入没有 id ，但 jQuery 选择器正在寻找 id=image。

只需将 id="image" 添加到文件输入。