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了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在 ...
随机推荐
- win10常用快捷键
记住Win10一些常用的快捷键,在使用电脑的过程中,可以快速的切换不同的功能窗口,减少鼠标的操作.大大提高工作效率.来看看下面这些常用的. Win键+Tab:激活任务视图 Win键+A:激活操作中心 ...
- R语言读取EXCEL文件的各种方法
路径问题 原始文件路径C:\Users\air\Desktop\1.txt R中有两种方法读取该路径 C:\\Users\\air\\Desktop\\1.txt C:/Users/air/Deskt ...
- ubuntu 16.04卸载不必要默认安装软件
两个办法,一个在ubuntu软件里一个一个删,明显的windows下做法. 还有一个通过终端来删除.ctrl+alt+t打开终端. 1.卸载libreoffices(要删一起删了,然后去装office ...
- [Swift]LeetCode334. 递增的三元子序列 | Increasing Triplet Subsequence
Given an unsorted array return whether an increasing subsequence of length 3 exists or not in the ar ...
- [Swift]LeetCode674. 最长连续递增序列 | Longest Continuous Increasing Subsequence
Given an unsorted array of integers, find the length of longest continuous increasing subsequence (s ...
- [Reversing.kr] Easy_KeygenMe Writeup
IDA打开.Main()函数就是关键算法 v6,v7,v8 是连续的 .可看成 L=[16,32,48].输入的name每位分别于L[]异或 得到的值存在v13.然后清空v9的值 ,输入Serial储 ...
- python预编译函数compile,exec,eval
funcname = "func" func = "def %s():\n" % funcname funccontent = 'print "hel ...
- 9.Flask Cookie和Session
1.1.概念 cookie:在网站中,http请求是无状态的.也就是说即使第一次和服务器连接后并且登录成功后,第二次请求服务器依然不能知道当前请求是哪个用户.cookie的出现就是为了解决这个问题,第 ...
- nginx替换响应头(重点:如何在替换时加上if判断)
在实现微信小程序内嵌非业务域名时,通过nginx做镜像网站绕过小程序业务域名检测,但有一些表单页面提交后会返回一个302状态,由响应头Location的值决定提交成功后的跳转地址.那么问题来了,这个地 ...
- Ocelot统一权限验证
Ocelot作为网关,可以用来作统一验证,接上一篇博客,我们继续 前一篇,我们创建了OcelotGateway网关项目,DemoAAPI项目,DemoBAPI项目,为了验证用户并分发Token,现在还 ...