工具系列 | 使用FormData方式上传文件
服务端代码
/**
* 文件上传
*/
public function uploadFile()
{
Log::error('文件上传 : '.json_encode($_FILES));
$dir = $this->request->post('type', 'file');
$file = $this->request->file('avatar');
if (!empty($file)) {
$info = $file->validate(['size' => 20480, 'ext' => 'jpg,png,gif,pfx,cer'])->move(Env::get('root_path') . 'public/upload/' . $dir);
if ($info) {
$file_path = str_replace("\\", "/", '/upload/' . $dir . '/' . $info->getSaveName());
return response_json(0, '上传成功',['url' => $file_path]);
} else {
return response_json(1, $file->getError());
}
} else {
return response_json(1, '未选择文件');
}
}
前端页面
<span class="img_upload">点击我上传</span> <input type="file" class="avatar" style="display: none;">
<script type="text/javascript" src="/assets/common/js/jquery.min.js"></script>
<script type="application/javascript">
// 上传图片
$('.img_upload').click(function() {
$('.avatar').click();
}); $('.avatar').change(function() {
// 获取上传文件,拿到type为file的input的具体文件,由于可能存在多选择文件问题,所以这里是[0]取第一个。
var _avatar = $('.avatar')[0]['files'][0];
var _fromData = new FormData();
_fromData.append('username', 'Tinywan');
_fromData.append('age', 24);
_fromData.append('avatar', _avatar); $.ajax({
url: "{:url('/index/Test/uploadFile')}",
type: "POST",
cache: false,
data: _fromData,
dataType: "JSON",
processData: false, // 设置 processData 选项为 false,防止自动转换数据格式。
contentType: false, // 告诉jquery不要设置content-Type请求头
success: function(data) {
// 上传成功后,清空当前文件,继续点击上传单个文件。否则不能继续点击上传
$('.avatar').val("");
console.log(data);
},
error: function(data) {
console.log(data);
}
});
});
</script>
1、全局文件数组接受参数:$_FILES
{
"avatar": {
"name": "2.png",
"type": "image/png",
"tmp_name": "/tmp/phppFGojm",
"error": 0,
"size": 11965
}
}
以上接受的参数是通过添加文件
var _avatar = $('.avatar')[0]['files'][0];
_fromData.append('avatar', _avatar);
服务端接受
$file = $this->request->file('avatar');
说明:这里传递的二进制文件名称必须和服务端接受的名称同名。其他数据可以通过POST方式接受:$post = $this->request->post();
2、增加第三个参数
_fromData.append('avatar', _avatar,'tinywan.png');
语法:formData.append(name, value, filename); 传给服务器的文件名称 (一个 USVString), 当一个 Blob 或 File 被作为第二个参数的时候, Blob 对象的默认文件名是 "blob"。 File 对象的默认文件名是该文件的名称。更多:https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append
服务端接受参数
{
"avatar": {
"name": "tinywan.png", // 重点在这里
"type": "image/png",
"tmp_name": "/tmp/phpponpkP",
"error": 0,
"size": 11965
}
}
参考
1、https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
2、https://www.cnblogs.com/lyr1213/p/6238026.html
工具系列 | 使用FormData方式上传文件的更多相关文章
- formdata方式上传文件,支持大文件分割上传
1.upload.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <h ...
- C# HTTP系列13 以form-data方式上传多个文件以及键值对集合到远程服务器
系列目录 [已更新最新开发文章,点击查看详细] 类似于以下场景,将表单中的用户信息(包含附件)上传到服务器并保存到数据库中, <form id="form1" run ...
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- IT轮子系列(四)——使用Jquery+formdata对象 上传 文件
前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...
- koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
- [转] 通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- Ajax方式上传文件
用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...
- 通过jQuery Ajax使用FormData对象上传文件
FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...
- 前端 - jquery方式 / iframe +form 方式 上传文件
环境与上一章一样 jquery 方式上传文件: HTML代码 {#html代码开始#} <input type="file" id="img" > ...
随机推荐
- CentOS 7 - 安装Python 3
Enable Software Collections (SCL) Software Collections, also known as SCL is a community project tha ...
- 数据结构与算法17—B树(B、B+、B*)
B树 B-树,就是B树,B树的原英文名是B-tree,所以很多翻译为B-树,就会很多人误以为B-树是一种树.B树是另外一种树.其实,B-tree就是B树. B-树的定义 B树(B-tree)是一种树状 ...
- FastJson--阿里开源的速度最快的Json和对象转换工具 https://www.cnblogs.com/kaituorensheng/p/8082631.html
import java.util.ArrayList;import java.util.List;import java.util.HashMap;import java.util.Map; impo ...
- 【转载】自定义View,有这一篇就够了
为了扫除学习中的忙点,尽可能多的覆盖Android知识的边边角角,决定对自定义View做一个稍微全面一点的使用方法总结,在内容上面并没有什么独特的地方,其他大神们博客上面基本上都有讲这方面的内容,如果 ...
- python正则表达式(4)--search方法
1.re.search函数 re.search 扫描整个字符串并返回第一个成功的匹配,如果匹配失败search()就返回None. (1)函数语法: re.search(pattern, string ...
- discuz x3.3排行首页图片显示更多的图片
找到\source\include\misc\misc_ranklist_index.php文件,修改41行 $ranklist = getranklist_pictures_index(9); 为 ...
- C++输入输出流 cin/cout 及格式化输出简介
C++ 可通过流的概念进行程序与外界环境( 用户.文件等 )之间的交互.流是一种将数据自源( source )推送至目的地( destination )的管道.在 C++ 中,与标准输入/输出相关的流 ...
- 前端性能----CDN
Content Distribute Network(内容分发网络)是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡.内容分发.调度等功能模块,使用户就近获取所需内容 ...
- POJ3616-Milking Time-(dp)
题意:牛有m个时间段可以挤奶,每个时间段的开始时间,结束时间,挤奶量不尽相同,寄完一次需要休息r时间,求在n时间内如何安排牛挤奶产量最大. 解题: 1.休息r时间,当做结束时间需要+r 2.以结束时间 ...
- python语言(四)关键字参数、内置函数、导入第三方模块、OS模块、时间模块
一.可变参数 定义函数时,有时候我们不确定调用的时候会传递多少个参数(不传参也可以).此时,可用包裹(packing)位置参数(*args),或者包裹关键字参数(**kwargs),来进行参数传递,会 ...