利用laravel+ajax实现文件上传功能方法示例


Posted in PHP onAugust 13, 2017

前言

大家都知道,早期的XMLHttpRequest不支持文件上传,一般用第三方js插件或者flash,现在可以借助XMLHttpRequest Level 2 的FormData对象实现二进制文件上传,正好最近工作中遇到了这个需求,所以本文就来给大家总结下实现的方法,话不多说了,来一起看看详细的介绍吧。

示例代码

@extends('layouts.art')
@section('content')

<form class="form-horizontal" id="avatar"> 
   {{ csrf_field() }}
 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">名字</label>
 <div class="col-sm-8">
  <input type="title" class="form-control" id="title" name="title">
 </div>
 </div>


 <div class="form-group">
 <label for="inputEmail3" class="col-sm-2 control-label">头像</label>
 <div class="col-sm-8">
  <input type="file" class="form-control" id="title" name="photo">
 </div>
 </div>


 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10">
  <a class="btn btn-default" onclick="uploadInfo()">上传</a>
 </div>
 </div>
</form>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 
function uploadInfo() { 
  var formData = new FormData($("#avatar")); 
  $.ajax({ 
   url: "{{url('photo')}}",
   type: 'POST', 
   data: formData, 
   contentType: false, 
   processData: false, 
   success: function (returndata) { 
    console.log(returndata); 
   }, 
   error: function (returndata) { 
    console.log(returndata); 
   } 
  }); 
} 

</script>

@endsection
//生成路径,图片存储
  $ext = $request->photo->getClientOriginalExtension();
  $cover_path = "images/album/covers/" . time() . $ext; 
  $name = "photo".time();
  $src = "images/album/photos/". $name .".jpg";
  Image::make($request->photo)->save(public_path($src));*/

 //批量上传图片

  foreach ($request->photo as $key => $value) {
   //生成路径,图片存储
   $prefix = "photo".mt_rand(1,1000);
   $Origname = $value->getClientOriginalName();
   $name = $prefix.$Origname;
   $src = "images/album/photos/".$name;
   $realPath = $value->getRealPath();
   Storage::disk('uploads')->put($src,file_get_contents($realPath));
  }

更多参考

https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/UsingFormDataObjects

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/UsingXMLHttpRequest#Submittingformsanduploading_files

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

PHP 相关文章推荐
vBulletin Forum 2.3.xx SQL Injection
Oct 09 PHP
福利彩票幸运号码自动生成器
Oct 09 PHP
apache mysql php 源码编译使用方法
May 03 PHP
PHP可变函数的使用详解
Jun 14 PHP
ThinkPHP调用百度翻译类实现在线翻译
Jun 26 PHP
PHP产生不重复随机数的5个方法总结
Nov 12 PHP
CI映射(加载)数据到view层的方法
Mar 28 PHP
Yii框架表单模型和验证用法
May 20 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
Nov 18 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
Nov 25 PHP
PHP检查文件是否存在,不存在自动创建及读取文件内容操作示例
Jan 23 PHP
通过PHP实现获取访问用户IP
May 09 PHP
Laravel5.5新特性之友好报错以及展示详解
Aug 13 #PHP
php数据序列化测试实例详解
Aug 12 #PHP
PHP新特性之字节码缓存和内置服务器
Aug 11 #PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
Aug 11 #PHP
如何修改Laravel中url()函数生成URL的根地址
Aug 11 #PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
Aug 11 #PHP
基于Laravel5.4实现多字段登录功能方法示例
Aug 11 #PHP
You might like
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
5.PHP的其他功能
2006/10/09 PHP
PHP内置过滤器FILTER使用实例
2014/06/25 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
php array_multisort 对数组进行排序详解及实例代码
2016/10/27 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
js实现可旋转的立方体模型
2016/10/16 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
JS实现判断移动端PC端功能
2020/02/21 Javascript
[56:29]Secret vs Optic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python pcm音频添加头转成Wav格式文件的方法
2019/01/09 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
详解Python 字符串相似性的几种度量方法
2019/08/29 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
请说出以下代码输出什么
2013/08/30 面试题
竞选大队委员演讲稿
2014/04/28 职场文书
庆六一活动总结
2014/08/29 职场文书
乡镇党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
地道战观后感
2015/06/04 职场文书
修辞手法有哪些?
2019/08/29 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书