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‘)}}"  />
    </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‘)}}"  />
    </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;

}

原文地址:https://www.cnblogs.com/zmdComeOn/p/10345906.html

时间: 2024-10-14 00:14:51

Laravel5多图上传和Laravel5单图上传的功能实现的相关文章

ueditor(1.4.3.2)提取单图上传功能

参照网络上流行的提取单图上传功能的方法并加以修改,主要通过创建提取的通用上传图片的js文件(custom.js)和简单修改UEditor的ueditor.all.js文件. 1)在自定义js custom.js中添加方法 var _editor = UE.getEditor('editor_img', {toolbars: [['simpleupload']]}); _editor.ready(function () { //设置编辑器不可用 //_editor.setDisabled(); 这

ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)

上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如果需求不确定是多少文件 则我们就需要动态的添加文件上传框,以实现灵活性. 基于上篇基本框架是不变的,主要修改以下几个方面 1.jQuery实现动态添加删除文件上传框 2.获取文件上传框的ID 3.ajaxfileupload.js里将ID数组转换为需要的Object数组 依次解决上面问题 一.实现动

文件上传下载之文件上传

13.1  文件上传 13.1.1  概述 在开发基于Web的应用的时候,经常会碰到需要实现文件上传.下载的功能,比如编辑某个商品,需要给它上传一个图片等等. 不使用Struts2的话,可以有很多种方式来实现文件上传,比如使用Apache的Common-FileUpload等.但是这些传统的方式,实现起来非常麻烦,需要写很多代码来进行控制. 现在使用Struts2来实现文件上传的功能,会更加简单和方便,事实上,Struts2的文件上传功能,默认就是基于Common-FileUpload来实现的,

***使用PHP实现文件上传和多文件上传

http://www.365mini.com/page/php-upload-file.htm 在PHP程序开发中,文件上传是一个使用非常普遍的功能,也是PHP程序员的必备技能之一.值得高兴的是,在PHP中实现文件上传功能要比在Java.C#等语言中简单得多.下面我们结合具体的代码实例来详细介绍如何通过PHP实现文件上传和多文件上传功能. 要使用PHP实现文件上传功能,我们先来编写两个php文件:index.php和upload.php.其中,index.php页面用于提交文件上传的表单请求,u

SpringMVC实现单文件上传、多文件上传、文件列表显示、文件下载

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 一.新建一个Web工程,导入相关的包 springmvc的包+commons-fileupload.jar+connom-io.jar+commons-logging,jar+jstl.jar+standard.jar 整个相关的包如下: 整个工程目录如下: 二.配置web.xml和SpringMVC文件

PhoneGap 开发应用 上传到 App Store 上

简单归纳几个流程,前提是你有一个开发者账号 1. 创建Identifiers  AppID(苹果网站上申请) 2. 使用Mac 或者 Windows申请一个Request文件, 然后创建一个Distribution 证书(苹果网站上申请) 3. 创建一个Provisioning 描述文件(苹果网站上申请) 4. 导出p12文件(使用windows 或者mac ) 5. PhoneGap Build上传 p12 文件和 Provisioning 文件,生成apk( PhoneGap Build 网

百度上传工具webuploader,图片上传附加参数

项目中需要上传视频,图片等资源.最先做的是上传图片,开始在网上找了一款野鸡插件,可以实现图片上传预览(无需传到后台).但是最近这个插件出了莫名的问题,不易修复,一怒之下,还是决定找个大点的,靠谱的插件吧.加之上传视频就是用的webuploader,所以上传图片也理所当然选它了. 插件初始化,js引用什么的,官方文档上都写的比较清楚,建议直接去官方api去看 http://fex.baidu.com/webuploader/getting-started.html#图片上传 官方api上值给出了上

android选择图片或拍照图片上传到服务器(包括上传参数)

From:http://blog.csdn.net/springsky_/article/details/8213898具体上传代码: 1.选择图片和上传界面,包括上传完成和异常的回调监听 [java] view plaincopy package com.spring.sky.image.upload; import java.util.HashMap; import java.util.Map; import android.app.Activity; import android.app.

支持多文件上传的jQuery文件上传插件Uploadify

支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Flash,主要特性:支持多文件上传.HTML5版本可拖拽上传.实时上传进度条显示.强大的参数定制功能,如文件大小.文件类型.按钮图片定义.上传文件脚本等. Flash版本使用方法: 1.加载JS和CSS ? 1 2 3 <script src="jquery/1.7.1/jquery.min.js