laravel 图片上传 ajax 方式

laravel 图片上传

//后台轮播图上传
$("#img-upload").on('submit',function(e){
e.preventDefault();
var formData = new FormData($(".banner-upload"));
$.ajax({
headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    type: 'POST',
    url: '/admin/banner/create' ,
  data: formData ,
  processData:false,
  //mimeType:"multipart/form-data",
  contentType: false,
            cache: false,
  success:function(data){
    console.log(data);
    if(data.status){
    console.log(data.message);
    }
    },
    error:function(err){
    console.log(err);
    }
});

form  表单方式

<form class="form-horizontal" action="{{ URL('/admin/banner/create') }}" method="POST" enctype="multipart/form-data" class="banner-upload">      {{ csrf_field() }}      <div class="box-body">
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">主题</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" value="" name="theme" placeholder="设置轮播主题">
          </div>
        </div>        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">状态</label>
          <div class="col-sm-10">
            <input type="radio" value="1" name="status">启用
            <input type="radio" value="0" name="status">禁用
          </div>
        </div>        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">上传图片</label>
          <div class="col-sm-10">
            <input type="file" name="photo" value="" placeholder="">            <div class="img-wrap">
                <img src="" alt="">
            </div>
          </div>
        </div>      </div>
      <!-- /.box-body -->
      <div class="box-footer clearfix">
        <button type="submit" class="btn btn-info pull-right" id="img-upload">提交</button>
      </div>
  </form>

　　后台函数

public function BannerCreate(Request $request)
    {
        $file = $request->file('photo');//获取图片
        $theme = $request->theme;//主题
        $status = $request->status;//状态
        $allowed_extensions = ["png", "jpg", "gif"];
        if ($file->getClientOriginalExtension() && !in_array($file->getClientOriginalExtension(), $allowed_extensions)) {
            return response()->json([
                'status' => false,
                'message' => '只能上传 png | jpg | gif格式的图片'
            ]);
        }        if ($request->hasFile('photo')) {        }        $destinationPath = 'storage/uploads/';
        $extension = $file->getClientOriginalExtension();
        $fileName = str_random(10).'.'.$extension;
        $file->move($destinationPath, $fileName);
        return Response()->json(
            [
                'status' => true,
                'pic' => asset($destinationPath.$fileName),
                'isMake' => $status,
                'message' => '新增成功！'
            ]
        );
    }

　　$destinationPath = 'storage/uploads/';    后面必须要有 / 负责上传后路径访问有问题

<form class=”form-horizontal” action=”{{ URL(‘/admin/banner/create’) }}” method=”POST” enctype=”multipart/form-data” class=”banner-upload”>

{{ csrf_field() }}

<div class=”box-body”>
<div class=”form-group”>
<label for=”inputEmail3″ class=”col-sm-2 control-label”>主题</label>
<div class=”col-sm-10″>
<input type=”text” class=”form-control” value=”” name=”theme” placeholder=”设置轮播主题”>
</div>
</div>

<div class=”form-group”>
<label for=”inputPassword3″ class=”col-sm-2 control-label”>状态</label>
<div class=”col-sm-10″>
<input type=”radio” value=”1″ name=”status”>启用
<input type=”radio” value=”0″ name=”status”>禁用
</div>
</div>

<div class=”form-group”>
<label for=”inputPassword3″ class=”col-sm-2 control-label”>上传图片</label>
<div class=”col-sm-10″>
<input type=”file” name=”photo” value=”” placeholder=””>

<div class=”img-wrap”>
<img src=”” alt=””>
</div>
</div>
</div>

</div>
<!– /.box-body –>
<div class=”box-footer clearfix”>
<button type=”submit” class=”btn btn-info pull-right” id=”img-upload”>提交</button>
</div>
</form>