在php laravel中从控制器上传之前如何显示图像预览 [英] How to show image preview before uploading from controller in php laravel
问题描述
我在一个项目中工作,我想为类别"上传图像.上传部分工作正常.我想要的是上传之前,当用户选择图像时,应该显示所选图像的预览以及图像名称.在这种情况下我很迷路.
i'm working in a project where i wanted to upload an image for Category. The uploading part is working smooth. what i want is before uploading, when user selects the image a preview of the selected image along with name of the image should be shown. I'm pretty lost in this case.
以下是我的看法部分:
{!! 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进行图像预览.
I have done uploading using controller instead of ajax because there were some complications...So kindly help me with image preview from controller.
推荐答案
引用以下链接
将此功能添加到您的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"/>
CHANGE YOUR blade.php file code like <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>
这篇关于在php laravel中从控制器上传之前如何显示图像预览的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!