使用 Ajax - Laravel 上传后显示照片

Question

我需要帮助我的问题是：在同一页面上传图片后如何显示图片我尝试了很多代码，但对我来说没有任何效果

这是blade代码

 <form action="{{ route('admin.user.store') }}" method="post" class="form-horizontal"
          enctype="multipart/form-data" id ="upload_form">
        @csrf
        <div class="row justify-content-center">
            <div class="col-xl-9">
                <!--begin::Wizard Step 1-->
               <div class="my-5 step" data-wizard-type="step-content" data-wizard-state="current">
                    <h5 class="text-dark font-weight-bold mb-10">User's Profile Details:</h5>
                    <!--begin::Group-->



                    <div class="form-group row">
                        <label class="col-xl-3 col-lg-3 col-form-label text-left">Avatar</label>
                        <div class="col-lg-9 col-xl-9">
                            <div class="image-input image-input-outline" id="kt_user_add_avatar">
                                <div class="image-input-wrapper" >
                    <img src="{{asset('assets/media/users/100_6.jpg')}}" width="120" height="120">

                                    </div>
                                <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                                    <i class="fa fa-pen icon-sm text-muted"></i>
                                    <input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" />
                                </label>
                                <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow" data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                                                        <i class="ki ki-bold-close icon-xs text-muted"></i>
                                                    </span>
                            </div>
                        </div>
                    </div>
                    <!--end::Group-->
  <div class="form-actions">
                    <div class="row">
                        <div class="col-md-offset-3 col-md-9">
                            <button type="submit" class="btn" style="background-color:#3699FF">Submit</button>
                            <a href="{{route('admin.user.index')}}" class="btn default" style="background-color: rgba(77, 89, 149, 0.06)">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

Answer 1

试试这个：（预览）

<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }
</script>

<input id="avatar" type="file" name="avatar" accept=".png, .jpg, .jpeg" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />

使用 Ajax - Laravel 上传后显示照片

Displaying photo after uploaded Using Ajax - Laravel

forms

ajax

upload

image

laravel