分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 技术分享

laravel 图片上传 ?ajax 方式

发布时间:2023-09-06 01:24责任编辑:白小东关键词:暂无标签

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

原文地址:http://www.cnblogs.com/winyh/p/7826352.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved