利用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 相关文章推荐
PHP设计模式 注册表模式
Feb 05 PHP
PHP中SESSION使用中的一点经验总结
Mar 30 PHP
浅析php学习的路线图
Jul 10 PHP
php中调用其他系统http接口的方法说明
Feb 28 PHP
PHP生成迅雷、快车、旋风等软件的下载链接代码实例
May 12 PHP
ThinkPHP模板Switch标签用法示例
Jun 30 PHP
详解WordPress开发中get_header()获取头部函数的用法
Jan 08 PHP
php 生成加密公钥加密私钥实例详解
Jun 16 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
Sep 01 PHP
PHP ADODB实现事务处理功能示例
May 25 PHP
Laravel框架路由管理简单示例
May 07 PHP
PHP开发api接口安全验证操作实例详解
Mar 26 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
PHPShop存在多个安全漏洞
2006/10/09 PHP
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
php中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
php判断linux下程序问题实例
2015/07/09 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
jQuery 图像裁剪插件Jcrop的简单使用
2009/05/22 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
JavaScript Split()方法
2015/12/18 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
JavaScript生成带有缩进的表格代码
2016/06/15 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Sanic框架配置操作分析
2018/07/17 Python
django中使用POST方法获取POST数据
2019/08/20 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
Exception类的常用方法
2012/06/16 面试题
企划经理的岗位职责
2013/11/17 职场文书
计算机网络专业推荐信
2013/11/24 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
策划总监岗位职责
2014/02/16 职场文书
人生感悟经典句子
2019/08/20 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python