Laravel5多图上传和Laravel5单图上传的功能实现
Laravel5文件上传默认只能上传一张图片,但是有的时候我们需要一次性上传多图就不行了,我在网上看了很多关于laravel5图片上传的文章,很多都只是介绍laravel5单图上传,多图片上传介绍少之有少,今天分享一篇关于laravrl5多图上传文章,代码逻辑设计可能不完美,但功能实现了。希望对大家有所帮助!
前端代码:
注意:<input type="file" class="default" name="img[]" />
<!------bootstrap-fileupload.min.js 图片上插件------->
<link href="{{url('Admin/css/bootstrap-fileupload.min.css')}}" rel="stylesheet">
<script src="{{url('Admin/js/bootstrap-fileupload.min.js')}}"></script> <!------上传正面图片 start------->
<div class="form-group last">
<label class="control-label col-md-2">选择图片 <i style="color: red;">*</i></label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 210px; height: 150px;">
<img src="{{url('Admin/images/23.jpg')}}" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i> 上传图片</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
<input type="file" class="default" name="img[]" />
<!--<input type="hidden" class="default" name="old-img" value="{$data.img}" />-->
</span>
<a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> 删除</a>
</div>
</div>
</div>
</div>
<!------上传正面图片 end-------> <!------上传背面图片 start----->
<div class="form-group last">
<label class="control-label col-md-2">选择图片 <i style="color: red;">*</i></label>
<div class="col-md-9">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 210px; height: 150px;">
<img src="{{url('Admin/images/23.jpg')}}" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-default btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i> 上传图片</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
<input type="file" class="default" name="img[]" />
<!--<input type="hidden" class="default" name="old-img" value="{$data.img}" />-->
</span>
<a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> 删除</a>
</div>
</div>
</div>
</div>
<!------上传背面图片 end------->
Laravel5单图上传:
public function upload(Request $request)
{
//判断请求中是否包含name=img的上传文件
if (!$request->hasFile('img')) {
exit("请选择上传图片, <a href=''>返回上一页!</a>");
}
// 判断图片上传中是否出错
$file = $request->file('img');
if (!$file->isValid()) {
exit("上传图片出错,请重试,<a href=''>返回上一页!</a>");
}
//$img_path = $file -> getRealPath(); // 获取临时图片绝对路径
$entension = $file -> getClientOriginalExtension(); // 上传文件后缀
$filename = date('YmdHis').mt_rand(100,999).'.'.$entension; // 重命名图片
$date = date('Y-m-d');
$path = $file->move(public_path().'/uploads/'.$date.'/',$filename); // 重命名保存
$img_path = 'uploads/'.$date.'/'.$filename;
return $img_path;
}
Laravel5多图上传:
其实多图片上传就是多了一个foreach循环
public function upload(Request $request){ $file = $request->file('img');
$filePath =[]; // 定义空数组用来存放图片路径
foreach ($file as $key => $value) {
// 判断图片上传中是否出错
if (!$value->isValid()) {
exit("上传图片出错,请重试!");
}
if(!empty($value)){//此处防止没有多文件上传的情况
$allowed_extensions = ["png", "jpg", "gif"];
if ($value->getClientOriginalExtension() && !in_array($value->getClientOriginalExtension(), $allowed_extensions)) {
exit('您只能上传PNG、JPG或GIF格式的图片!');
}
$destinationPath = '/uploads/'.date('Y-m-d'); // public文件夹下面uploads/xxxx-xx-xx 建文件夹
$extension = $value->getClientOriginalExtension(); // 上传文件后缀
$fileName = date('YmdHis').mt_rand(100,999).'.'.$extension; // 重命名
$value->move(public_path().$destinationPath, $fileName); // 保存图片
$filePath[] = $destinationPath.'/'.$fileName; }
}
// 返回上传图片路径,用于保存到数据库中
return $filePath; }
Laravel5多图上传和Laravel5单图上传的功能实现的更多相关文章
- js formData图片上传(单图上传、多图上传)后台java
单图上传 <div class="imgUp"> <label>头像单图</label> <input type=&quo ...
- node多图或者单图上传
<form id="form" enctype="multipart/form-data"> <input type="text&q ...
- jQuery多图上传Uploadify插件使用及传参详解
因为工作需要,这两天接触到了Uploadify插件,由于是第一次用,花了我近一天的时间.下面我把我在用这个插件过程详细的分享出来,也让自己巩固一下,也希望能帮助到你. 所需文件: jquery-1.8 ...
- UEditor单图上传跨域问题解决方案
UEditor UEditor是百度团队提供的富文本编辑器 git地址为:https://github.com/fex-team/ueditor 在最近的项目中使用了该插件作为项目的富文本编辑器 由于 ...
- SpringBoot图片上传(四) 一个input上传N张图,支持各种类型
简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...
- 图片上传5-多个图片上传,独立项目Demo和源码
图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...
- [转载]ASP.NET Core文件上传与下载(多种上传方式)
ASP.NET Core文件上传与下载(多种上传方式) 前言 前段时间项目上线,实在太忙,最近终于开始可以研究研究ASP.NET Core了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在 ...
随机推荐
- C盘突然爆满
C盘突然爆满!幸好还开的机!~~ 因为是突然就爆满了,想着应该是虚拟内存的原因!于是就开始了探索.... 1.文件夹选项中把所有文件都显示出来. 2.在C盘你就会看到一个“pagefile.sys”的 ...
- .NET Core 微服务架构 Steeltoe 使用(基于 Spring Cloud)
阅读目录: 1. Spring Cloud Eureka 注册服务及调用 2. Spring Cloud Hystrix 断路器 3. Spring Cloud Hystrix 指标监控 4. Spr ...
- Lock、ReentrantLock、ReentrantReadWriteLock区别
Lock Lock相比于synchronized具有更强大的功能,在jdk1.6之前,锁竞争激烈的情况下使用lock的实现类ReentrantLock甚至比synchronized具有更好的性能,1. ...
- App功能测试
App功能测试 1. 运行 1)App安装完成后的试运行,可正常打开软件. 2)App打开测试,是否有加载状态进度提示. 3)App页面间的切换是否流畅,逻辑是否正确. 4)注册 同表单编辑页面 用 ...
- [Swift]LeetCode973. 最接近原点的 K 个点 | K Closest Points to Origin
We have a list of points on the plane. Find the K closest points to the origin (0, 0). (Here, the d ...
- mybatis xml < >
[参考文章]:mybatis 中的 xml 配置文件中 ‘<’. ‘>’ 处理 1.使用转义字符将 ‘<’. ‘>’ 替换掉 描述 字符 转义字符小于号 < <大于 ...
- SecureCRT8.1发送命令到多个或所有linux终端
- 小程序webview实践
小程序webview实践 -- 张所勇 大家好,我是转转开放业务部前端负责人张所勇,今天主要来跟大家分享小程序webview方面的问题,但我并不会讲小程序的webview原理,而我主要想讲的是小程序内 ...
- FloatingActionButton(悬浮按钮)使用学习<一>
FloatingActionButton简称FAB. 一. 对于App或某个页面中是否要使用FloatingActionButton必要性: FAB代表一个App或一个页面中最主要的操 ...
- 面试小知识:MySQL索引相关
前言 本模板主要是一些面试相关的题目,对于每一道问题,我会提供简单的解答,答案的来源主要是基于自己看了各方资料之后的理解,如果有错的,欢迎指点出来. 1. 什么是最左前缀原则? 以下回答全部是基于My ...