laravel 图片上传 ajax 方式

Posted 2020-10-14 winyh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了laravel 图片上传 ajax 方式相关的知识，希望对你有一定的参考价值。

//后台轮播图上传
	$("#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>

<div class="box-footer clearfix">
<button type="submit" class="btn btn-info pull-right" id="img-upload">提交</button>
</div>
</form>

以上是关于laravel 图片上传 ajax 方式的主要内容，如果未能解决你的问题，请参考以下文章

Laravel 5 Ajax 文件/图像上传

laravel框架里用jq实现ajax图片上传

Laravel 5 覆盖summernote 图片上传

ajax上传图片到服务器简单操作

纯Ajax上传图片到服务器端

使用ajax发送文件的三种方式及预览图片的方法,上传按钮美化