在php Laravel中从控制器上传之前如何显示图像预览 Download


我在一个项目中工作，我想为类别上传图像。 上传部分工作正常。 我想要的是上传之前，当用户选择图像时，应该显示所选图像的预览以及图像名称。 在这种情况下我很迷路。

以下是我的观点部分：

{!! Form::open(['url' => '/addCategory', 'method' => 'post', 'enctype'=>  'multipart/form-data']) !!}
        {{ csrf_field() }}
          @method('post')



          <div class="card ">
            <div class="card-header card-header-primary">
              <h4 class="card-title">{{ __('Add Category') }}</h4>
              <p class="card-category"></p>
            </div>
            <div class="card-body ">
              <div class="row">
                <label class="col-sm-2 col-form-label">{{ __('Name') }}</label>
                <div class="col-sm-7">
                  <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                    <input class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="category" id="category" type="text" placeholder="{{ __('Name') }}" value="" required="true" aria-required="true" />

                  </div>
                </div>
              </div>

              <div class="row">
                <label class="col-sm-2 col-form-label">{{ __('Description') }}</label>
                <div class="col-sm-7">
                  <div class="form-group{{ $errors->has('name') ? ' has-danger' : '' }}">
                    <textarea class="md-textarea form-control" rows="5" name="desc" id="desc" type="text" placeholder="{{ __('Description') }}" value="" required="true" aria-required="true"></textarea>

                  </div>
                </div>
              </div>


              <div class="row">
                <label for="image" class="col-sm-2 col-form-label">Category Image</label>
                <div class="col-sm-7">
                  <input id="cat_image" type="file" class="form-control" name="cat_image">
                  <img src="" id="category-img-tag" width="200px" />   <!--for preview purpose -->
                </div>
              </div>

            </div>
            <div class="card-footer ml-auto mr-auto">
              <button type="submit" class="btn btn-primary">{{ __('Add Category') }}</button>
            </div>
          </div>

下面是控制器部分：

public function upload(Request $request)
    {
        $cat = new Category;
        $cat->name = request('category');
        $cat->description = request('desc');
        if ($request->file('cat_image')) 
        {
            $categoryFile = $request->file('cat_image');
            $mimeType = $categoryFile->getClientOriginalName();
            $path =  public_path() . '/storage/category/';
            $categoryFile->move($path, $mimeType);

            $cat->cat_image = $mimeType;
        }   
        $cat->save();

        toastr()->success($cat->name,'Category added!');

        return redirect('/category');
    }

我已经使用controller而不是ajax完成了上传，因为存在一些复杂的问题...因此，请帮助我从controller进行图像预览。

enter image description here

1 个答案:

答案 0 :(得分：0)

引用下面的链接

enter link description here

将此功能添加到您的javascript代码中 

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#category-img-tag').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

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

更改您的blade.php文件代码，例如<img src="#" id="category-img-tag" width="200px" /> 

      <div class="row">
        <label for="image" class="col-sm-2 col-form-label">Category Image</label>
        <div class="col-sm-7">
          <input id="cat_image" type="file" class="form-control" name="cat_image">
          <img src="#" id="category-img-tag" width="200px" />   <!--for preview purpose -->
        </div>
      </div>



Similar searches