1. 程式人生 > >laravel 圖片上傳 ajax 方式

laravel 圖片上傳 ajax 方式

field photo ora radio anr stat for def -a

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 方式