工具系列 | 使用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" > ...
随机推荐
- 英语partschinite芬达石partschinite锰铝榴石
partschinite指锰铝榴石,属于石榴石的一种,由于它有芬达饮料的诱人颜色,大家也称其为“芬达石”.石榴石宝石族中重要品种之一,化学成分为锰铝硅酸盐,颜色从红到橙红,红到棕红,玫瑰红.浅玫红均有 ...
- X509证书信任管理器类的详解
在JSSE中,证书信任管理器类就是实现了接口X509TrustManager的类.我们可以自己实现该接口,让它信任我们指定的证书. 接口X509TrustManager有下述三个公有的方法需要我们实现 ...
- 第十周LINUX 学习笔记
LVS集群nat丶DR HA:高可用 平均无故障时间/(平均无故障时间+平均修复时间) 负载均衡 次序lb(负载)——>ha()LB tcp:lvs,haproxy 应用 ...
- 如何为scratch3.0创建一个独立的页面或窗体
很多人都利用GIT上的scratch3.0做开发,但是苦于有些定制需要个性化开发但是不知道如何动手.本篇文章来做好普及工作吧. 首先需要完成事项如下: 1.需要进行modal定义 2.新增窗口的UI界 ...
- nginx centos7 出现403 403 Forbidden
nginx访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log.打开日志发现报错Permission denied,详细报错如下: 1. open() ...
- iwlist/iwconfig/iw命令
1.iwlist 命令:用于对/proc/net/wireless文件进行分析,得出无线网卡相关信息 # iwlist wlan0 scanning 搜索当前无线网络 # iwlist wlan0 f ...
- Pychram中使用reduce()函数报错:Unresolved reference 'reduce'
python3不能直接使用reduce()函数,因为reduce() 函数已经被从全局名字空间里移除了,它现在被放置在fucntools 模块里,所以要使用reduce函数得先饮用fucntools ...
- 前端性能----TCP协议
TCP属于OSI七层模型中的传输层协议,位于网络边缘,提供端到端的可靠数据传输,其有着承上启下的作用,协议数据单元为报文段(Message Segment). TCP需要提供以下功能: 分组和复用 应 ...
- class struct Equals
{ class clsA { private int _i; public int I { set { _i = value; } get { return _i; } } } struct strc ...
- $.extend(obj1,obj2...,objN)小结 扩展obj1属性,有返回值,返回第一个被扩展后的对象
<script> var obj1 = { name:'liu', age:'24' } var obj2 = { name:'jinyu', sex:'m ...