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单图上传的功能实现的更多相关文章

  1. js formData图片上传(单图上传、多图上传)后台java

    单图上传 <div class="imgUp">     <label>头像单图</label>     <input type=&quo ...

  2. node多图或者单图上传

    <form id="form" enctype="multipart/form-data"> <input type="text&q ...

  3. jQuery多图上传Uploadify插件使用及传参详解

    因为工作需要,这两天接触到了Uploadify插件,由于是第一次用,花了我近一天的时间.下面我把我在用这个插件过程详细的分享出来,也让自己巩固一下,也希望能帮助到你. 所需文件: jquery-1.8 ...

  4. UEditor单图上传跨域问题解决方案

    UEditor UEditor是百度团队提供的富文本编辑器 git地址为:https://github.com/fex-team/ueditor 在最近的项目中使用了该插件作为项目的富文本编辑器 由于 ...

  5. SpringBoot图片上传(四) 一个input上传N张图,支持各种类型

    简单介绍:需求上让实现,图片上传,并且可以一次上传9张图,图片格式还有要求,网上找了一个测试了下,好用,不过也得改,仅仅是实现了功能,其他不尽合理的地方,还需自己打磨. 代码: //html<d ...

  6. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  7. 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)

    现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...

  8. 图片上传5-多个图片上传,独立项目Demo和源码

    图片上传,一次性可以上传多个图片,每个图片可以有名字.URL.排序.备注等字段.这是区别于使用百度WebUploader等多图上传工具的地方. 项目相关图片 Jar包管理:Maven用到的框架:Spr ...

  9. [转载]ASP.NET Core文件上传与下载(多种上传方式)

    ASP.NET Core文件上传与下载(多种上传方式)   前言 前段时间项目上线,实在太忙,最近终于开始可以研究研究ASP.NET Core了. 打算写个系列,但是还没想好目录,今天先来一篇,后面在 ...

随机推荐

  1. JavaScript 获取完整当前域名

    <script> var dq_url = window.location.protocol+"//"+window.location.host;/*获取当前域名*/ ...

  2. 第一个servlet程序

    在Eclipse中新建一个Dynamic Web Project 在WebContent下面添加index.jsp <%@ page language="java" cont ...

  3. Hibernate4集成spring4报错----No Session found for current thread

    在编写一个Hibernate4集成spring4的小demo的时候出现了该错误: org.hibernate.HibernateException: No Session found for curr ...

  4. 【安富莱原创开源应用第2期】基于RL-USB和RL-FlashFS的完整NAND解决方案,稳定好用,可放心用于产品批量

    说明:0. NAND Flash这块经常有人咨询,这里发布一个完整的解决方案,支持擦写均衡,坏块管理,ECC和掉电保护.        早期的时候我们是用的自己做的NAND算法,支持滑块管理,擦写均衡 ...

  5. [Swift]LeetCode689. 三个无重叠子数组的最大和 | Maximum Sum of 3 Non-Overlapping Subarrays

    In a given array nums of positive integers, find three non-overlapping subarrays with maximum sum. E ...

  6. 解决SpringMVC中文乱码问题--这是前端传参数到服务器

    SpringMvc参数传递中乱码问题   问题描述: 当传递中文参数到controller类时,无乱是get方式还是post方式都出现乱码 解决: 1.保证所有的页面编码都是utf-8,包括jsp页面 ...

  7. CentOS 6.5系统上安装SVN服务器

    有效地管理源代码的方式是使用工具去帮助我们管理 , SVN(Subversion)就是目前主流的源代码管理工具 , 也称为版本控制工具. 本文主要介绍CentOS6.5上安装SVN服务器,配置SVN服 ...

  8. Windows Server 2012安装mysql5.7.24记录

    系统环境: 一.下载mysql5.7.24安装包 地址:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 下载解压到相应的目录,我的路径 ...

  9. 『2019/3/19 USACO测试 反思与总结』

    2019/3/8 USACO测试 这是第三次考试了,不过这一次没有上一次考得好,也算是比较失误的,有一道题思路对但是写挂了. 还是看一下试题安排: 题号 试题分组 考察算法 思维难度 代码难度 1 银 ...

  10. 【安卓本卓】Android系统源码篇之(一)源码获取、源码目录结构及源码阅读工具简介

    前言        古人常说,“熟读唐诗三百首,不会作诗也会吟”,说明了大量阅读诗歌名篇对学习作诗有非常大的帮助.做开发也一样,Android源码是全世界最优秀的Android工程师编写的代码,也是A ...