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="" > </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="" >
</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>
laravel 圖片上傳 ajax 方式