服务端代码

/**
* 文件上传
*/
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方式上传文件的更多相关文章

  1. formdata方式上传文件,支持大文件分割上传

    1.upload.html <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <h ...

  2. C# HTTP系列13 以form-data方式上传多个文件以及键值对集合到远程服务器

    系列目录     [已更新最新开发文章,点击查看详细] 类似于以下场景,将表单中的用户信息(包含附件)上传到服务器并保存到数据库中, <form id="form1" run ...

  3. 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  4. IT轮子系列(四)——使用Jquery+formdata对象 上传 文件

    前言 在MVC 中文件的上传,一般都采用控件: <h2>IT轮子四——文件上传</h2> <div> <input type="file" ...

  5. koa2:通过Ajax方式上传文件,使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  6. [转] 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  7. Ajax方式上传文件

    用到两个对象 第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象,但IE9尚未支持 For ...

  8. 通过jQuery Ajax使用FormData对象上传文件

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用For ...

  9. 前端 - jquery方式 / iframe +form 方式 上传文件

    环境与上一章一样 jquery 方式上传文件: HTML代码 {#html代码开始#} <input type="file" id="img" > ...

随机推荐

  1. 英语partschinite芬达石partschinite锰铝榴石

    partschinite指锰铝榴石,属于石榴石的一种,由于它有芬达饮料的诱人颜色,大家也称其为“芬达石”.石榴石宝石族中重要品种之一,化学成分为锰铝硅酸盐,颜色从红到橙红,红到棕红,玫瑰红.浅玫红均有 ...

  2. X509证书信任管理器类的详解

    在JSSE中,证书信任管理器类就是实现了接口X509TrustManager的类.我们可以自己实现该接口,让它信任我们指定的证书. 接口X509TrustManager有下述三个公有的方法需要我们实现 ...

  3. 第十周LINUX 学习笔记

    LVS集群nat丶DR HA:高可用    平均无故障时间/(平均无故障时间+平均修复时间)        负载均衡 次序lb(负载)——>ha()LB  tcp:lvs,haproxy  应用 ...

  4. 如何为scratch3.0创建一个独立的页面或窗体

    很多人都利用GIT上的scratch3.0做开发,但是苦于有些定制需要个性化开发但是不知道如何动手.本篇文章来做好普及工作吧. 首先需要完成事项如下: 1.需要进行modal定义 2.新增窗口的UI界 ...

  5. nginx centos7 出现403 403 Forbidden

    nginx访问时报403, 于是查看nginx日志,路径为/var/log/nginx/error.log.打开日志发现报错Permission denied,详细报错如下: 1.    open() ...

  6. iwlist/iwconfig/iw命令

    1.iwlist 命令:用于对/proc/net/wireless文件进行分析,得出无线网卡相关信息 # iwlist wlan0 scanning 搜索当前无线网络 # iwlist wlan0 f ...

  7. Pychram中使用reduce()函数报错:Unresolved reference 'reduce'

    python3不能直接使用reduce()函数,因为reduce() 函数已经被从全局名字空间里移除了,它现在被放置在fucntools 模块里,所以要使用reduce函数得先饮用fucntools ...

  8. 前端性能----TCP协议

    TCP属于OSI七层模型中的传输层协议,位于网络边缘,提供端到端的可靠数据传输,其有着承上启下的作用,协议数据单元为报文段(Message Segment). TCP需要提供以下功能: 分组和复用 应 ...

  9. class struct Equals

    { class clsA { private int _i; public int I { set { _i = value; } get { return _i; } } } struct strc ...

  10. $.extend(obj1,obj2...,objN)小结 扩展obj1属性,有返回值,返回第一个被扩展后的对象

    <script> var obj1 = {     name:'liu',     age:'24' } var obj2 = {     name:'jinyu',     sex:'m ...