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. Ubunto使用 码云 创建项目

    1.安装 git sudo apt-get install git配置 git 文件 git config --global user.name "你的用户名" git confi ...

  2. 将选中的物体写入XML文件

    using System.Collections;using System.Collections.Generic;using System.Xml.Linq;using UnityEditor;us ...

  3. [Swift]LeetCode62. 不同路径 | Unique Paths

    A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The ...

  4. [Bash]LeetCode193. 有效电话号码 | Valid Phone Numbers

    Given a text file file.txt that contains list of phone numbers (one per line), write a one liner bas ...

  5. [Swift]LeetCode312. 戳气球 | Burst Balloons

    Given n balloons, indexed from 0 to n-1. Each balloon is painted with a number on it represented by ...

  6. bilibili源码泄漏后,程序员们从代码里扒出来的彩蛋

    昨天bilibili又上热搜了,被某人在github上开了个账号,传了份整个后端代码到github,这是被人扒光了衣服看个精光啊. 这件事情,作为程序员的我们除了调侃和fork的同时,想一想,造成这个 ...

  7. 用Flutter开发的跨平台项目,完美运行在Android和IOS上,Material简洁风格,包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目,还有漂亮的妹子图库,运行极度流畅,结构清晰,代码规范,值得拥有

    Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴 ...

  8. Java 子类 instanceof 父类

    1.结论: 子类 instanceof 父类 == true 父类 instanceof 子类 == false 2.测试代码 @Test public void testInstanceof() { ...

  9. 说一说MVC的CSRF(三)

    用途:防止CSRF(跨网站请求伪造). 用法:在View->Form表单中:<%:Html.AntiForgeryToken()%> 在Controller->Action动作 ...

  10. java基础(十二 )-----Java泛型详解

    本文对java的泛型的概念和使用做了详尽的介绍. 概述 泛型在java中有很重要的地位,在面向对象编程及各种设计模式中有非常广泛的应用. 什么是泛型?为什么要使用泛型? 泛型,即“参数化类型”.一提到 ...