利用laravel+ajax实现文件上传功能方法示例
作者:daisy 发布时间:2024-05-03 15:28:02
标签:laravel,ajax,文件上传
前言
大家都知道,早期的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/
0
投稿
猜你喜欢
- 很久以前写过如何成为优秀的设计师,近半年来经常做设计评审,有很多感触,顺便写一点下来,我们的Blog也应该有更高的更新频率。言归正传,我认为
- php读写二进制文件可以使用pack和unpack函数。今天要处理一个二进制文件的问题,所以需要用一下,特意了解一下pack的用法,unpa
- 一、 软件配置安装必备爬虫环境软件:python 3.8pip install requestspip install beautifuls
- 1.什么是MD5加密MD5消息摘要算法(MD5 Message-Digest Algorithm),一种被广泛使用的密码散列函数,可以产生出
- 存储过程的概念 存储过程Procedure是一组为了完成特定功能的SQL语句集合,经编译后存储在数据库
- PyQt的使用与pycharm的结合环境安装pip install pyqt5 -i https://pypi.tuna.tsinghua.
- 排序算法是《数据结构与算法》中最基本的算法之一,也是面试必背题,为方便技术交流,文末创建技术交流群。排序算法可以分为内部排序和外部排序,内部
- 脚本之家已经给大家介绍过range和xrange的区别的基础知识,有兴趣的朋友可以参阅: python中xrange和range的
- 程序设计是困难的,其核心是管理的复杂性。计算机程序是人类做出的最复杂的东西。质量是不可靠的且隐蔽的。好的体系架构是必需给程序足够的结构使其健
- 主类别表名:Navtion_TopSubject 主键fTopID Char(36) 次类别表名:Navtion_NodeSubject 外
- 在开发项目中,我们可以通过MySQL的慢查询日志对有效率问题的SQL进行监控。下面一些命令是开启日志:查找慢查询日志文件的目录show va
- Gzip是什么复制大神们的解释吧:GZIP最早由Jean-loup Gailly和Mark Adler创建,用于UNIX系统的文件压缩。我们
- 环境准备 python3.52 pycharm5.05 Pillow 自制的验证码工具包/utils/check_code 验证码的作用防恶
- 任何事情都是由量变到质变的过程,学习Python也不例外。只有把一个语言中的常用函数了如指掌了,才能在处理问题的过程中得心应手,快速地找到最
- CSS 和 JavaScript 的压缩已经很成熟,各大网站都在使用。HTML 的压缩(特指去除空白字符和注释),除了 Google 等搜索
- 先声明一下,这是本人在某个项目中用到的,本人自己写的,如有雷同纯属巧合。同时也欢迎高人指正。这种星级的投票效果很常见,但是目前线上大多都是通
- 直接上代码:# -*- coding: utf-8 -*- import Queue import threadingimport urll
- 多版本并发控制Multiversion Concurrency Control大部分的MySQL的存储 引擎,比如InnoDB,Falcon
- 导读需要使用python做一个将很多个不规则PPT导出成用文件夹归纳好的图片集,所以就需要使用comtypes调用本机电脑上的ppt软件,批
- (1)查看日期函数拓展phpinfo()<?phpphpinfo();打开上述页面之后,可以看到以下,证明已经安装日期拓展 浏览器输入