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 中的内容，但无法正常工作，您可以帮助解决这个问题吗？

note: Jquesy cdn added and its work as expected

Answer 1

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

只需在文件输入中添加 id="image"。

laravel 使用 jquery 上传图片和实时预览似乎已损坏

laravel from uload image and live preview with jquery seem to broken

jquery

laravel

laravel-blade