利用laravel+ajax实现文件上传功能方法示例
作者:daisy 时间:2024-05-03 15:28:02
前言
大家都知道,早期的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
来源:https://fjun.org/laravel-ajax/
标签:laravel,ajax,文件上传
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python 切片和range()用法说明
2021-12-12 07:40:52
processlist命令 查看mysql 线程
2024-01-24 02:58:30
Python利用DNN实现宝石识别
2023-08-07 05:49:18
![](https://img.aspxhome.com/file/2023/0/131460_0s.jpg)
Python调用百度OCR实现图片文字识别的示例代码
2021-04-07 14:21:50
![](https://img.aspxhome.com/file/2023/2/90502_0s.jpg)
Ext2.0.2经典的一个JS组件(带EXT中文手册)
2009-04-13 12:24:00
妙用Dreamweaver MX共享Word XP文件
2010-09-05 21:17:00
![](https://img.aspxhome.com/file/UploadPic/20072/200723113242108s.jpg)
Golang 使用Map实现去重与set的功能操作
2024-02-21 14:54:21
python版飞机大战代码分享
2023-11-13 22:29:03
Appium+Python实现简单的自动化登录测试的实现
2021-09-13 05:49:14
![](https://img.aspxhome.com/file/2023/9/82709_0s.png)
Python自定义线程池实现方法分析
2021-12-17 09:13:10
![](https://img.aspxhome.com/file/2023/7/107147_0s.png)
SpringSecurity从数据库中获取用户信息进行验证的案例详解
2024-01-23 17:16:25
![](https://img.aspxhome.com/file/2023/8/122288_0s.png)
Python实现向QQ群成员自动发邮件的方法
2021-08-16 13:41:33
python如何实现API的调用详解
2023-12-26 18:24:07
![](https://img.aspxhome.com/file/2023/6/133416_0s.png)
200 行python 代码实现 2048 游戏
2021-08-06 16:17:35
![](https://img.aspxhome.com/file/2023/9/63879_0s.jpg)
vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码
2024-05-13 09:38:51
![](https://img.aspxhome.com/file/2023/7/125277_0s.png)
IE下float产生双倍margin
2007-12-26 12:29:00
![](https://img.aspxhome.com/file/UploadPic/200712/26/20071226123712415s.gif)
PHP实现获取两个以逗号分割的字符串的并集
2023-06-01 03:24:53
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2024-04-17 10:26:21
pandas数据清洗,排序,索引设置,数据选取方法
2023-06-13 15:08:45
浅谈pytorch中为什么要用 zero_grad() 将梯度清零
2022-10-02 11:24:18
![](https://img.aspxhome.com/file/2023/2/71982_0s.png)