如何上传具有某些字段的图像?

时间:2019-07-09 18:21:30

标签: javascript ajax laravel

我正在尝试上传带有必填字段(例如名称,说明)的图片。当我插入没有图像字段的数据时,它可以工作,但是当尝试上传图像文件时,也不会将数据插入数据库。谁能告诉我我的代码可能出什么问题了吗?

控制器

public function store(Request $request)
{
    $this->validate($request, [
        'cat_name' => 'required|max:255',
        'description' => 'required|min:6',
        'cat_pic' => 'required|image|mimes:jpg,jpeg,png',
    ]);

    $fileName = null;

    if ($request()->hasFile('cat_pic')) {

       $file = $request()->file('cat_pic');
       $fileName = time().'.'.$file->getClientOriginalExtension();
       $destinationPath = public_path('/uploads/products/cats/');
       $file->move($destinationPath, $fileName);  
       $this->save();
   }

    Catagories::create([
        'cat_name' => $request->input('cat_name'),
        'description' => $request->input('description'),
        'cat_pic' => $fileName,

    ]);

    Session::flash('alert', __('messages.created'));
    Session::flash('alertClass', 'success');
    return redirect()->route('catagories');
}

查看

<div class="col-md-4 offset-5">
<div class="form-group">
    <form role="form" action="<?php echo e('/products/cats') ?>" method="POST" id="createcat" >
        {{ csrf_field() }}
      <p>
        Create New Product Category
      </p>
      <div class="form-group">
        <label for="cat_name">
          Name*:</label>
          <input type="text" class="form-control"
          id="cat_name" name="cat_name" required maxlength="50">
        </div>
        <div class="form-group">
        <label for="cat_pic">Category Image* </label>
    <input data-preview="#preview" class="form-control" name="cat_pic" type="file" id="cat_pic">
    <img class="col-md-6" id="preview" height="100px" width="20px" src="">
  </div>
          <div class="form-group">
            <label for="description">
              Description*:</label>
              <textarea class="form-control" type="textarea" name="description"
              id="description" placeholder="Category Description"
              maxlength="600" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-lg btn-success btn-block" id="btncreatecat">Create</button>

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

@endsection
@push('scripts')
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

路线

Route::resource('products/cats', 'Admin\CatController');

和一些JQuery预览图像

  <script type="text/javascript">
    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#preview').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#cat_pic").change(function(){
        readURL(this);
    });
</script>

2 个答案:

答案 0 :(得分:1)

我意识到问题是我忘了在表单标签中添加enctype="multipart/form-data"

答案 1 :(得分:1)

您需要将 $(".basicAutoComplete").autocomplete({ source: function(request, response) { var results = $.ui.autocomplete.filter(list, request.term); if (!results.length) { results = [NoResultsLabel]; } response(results); }, minLength: 2, }); 添加到enctype="multipart/form-data"标记中。

赞:

<form>

因此您的表单可以发送文本以外的其他内容。