Отображение фото после загрузки с использованием Ajax - Laravel - PullRequest
Новая
       40

Отображение фото после загрузки с использованием Ajax - Laravel

0 голосов
/ 02 августа 2020

Мне нужна помощь, пожалуйста. Мой вопрос: как я могу отобразить изображение после его загрузки на той же странице. Я пробую много кода, но у меня ничего не работает

Вот код лезвия 

 <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>

1 Ответ

1 голос
/ 02 августа 2020

Попробуйте это: (для предварительного просмотра) 

<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" />
...