Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Ajax文件上传时:Formdata、File、Blob的关系

Ajax文件上传时:Formdata、File、Blob的关系

作者头像
房东的狗丶
发布于 2023-02-17 05:55:53
发布于 2023-02-17 05:55:53
3.2K00
代码可运行
举报
文章被收录于专栏:友人a的笔记丶友人a的笔记丶
运行总次数:0
代码可运行

Formdata接口

“Formdata”接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去。

实现了 FormData 接口的对象可以直接在for...of(遍历属性值,for...in 则是遍历属性名)结构中使用,而不需要调用entries()返回可迭代对象(iterator) : for (var p of myFormData) 的作用和 for (var p of myFormData.entries()) 是相同的。方法、属性如下:

  1. FormData([Form])创建一个新的 FormData 对象,form这种方式创建的FormData对象会自动将form中的表单值也包含进去,包括文件内容也会被编码之后包含进去。。
  2.  append(name, value),添加一个新值到 FormData 对象内的一个已存在的键中,如果键不存在则会添加该键。 FormData.set 会使用新值覆盖已有的值,而 append() 会把新值添加到已有值集合的后面。
  3. delete() 方法会从 FormData 对象中删除指定键,即 key,和它对应的值,即 value。
  4. FormData.entries()返回一个包含所有键值对的iterator对象,遍历的值索引0为key,1为键值。
  5. FormData.get()返回在 FormData 对象中与给定键关联的第一个值。
  6. FormData.getAll()返回一个包含 FormData 对象中与给定键关联的所有值的数组。
  7. FormData.has()返回一个布尔值表明 FormData 对象是否包含某些键。
  8. FormData.keys()返回一个包含所有键的iterator对象。
  9. FormData.set()给 FormData 设置属性值,如果FormData 对应的属性值存在则覆盖原值,否则新增一项属性值。
  10. FormData.values()返回一个包含所有值的iterator对象。

如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。

File对象、接口

  1.  File对象可以从Input元素的Files(Filelist对象)属性中获取(如files[0]),可以用于FileReader对象在本地读取文件。
  2. 还可以通过new File(),var myFile = new File(bits, name[, options]);
    1. name,表示文件名称,或者文件路径。
    2. bits,一个包含ArrayBuffer,ArrayBufferView,Blob,或者 DOMString 对象的 Array — 或者任何这些对象的组合。这是 UTF-8 编码的文件内容。
    3. options 可选,type: DOMString,表示将要放到文件中的内容的 MIME 类型。默认值为 "" 。lastModified: 数值,表示文件最后修改时间的 Unix 时间戳(毫秒)。默认值为 Date.now()。
  3. https://developer.mozilla.org/zh-CN/docs/Web/API/File
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

下载new file() 生成的对象文件

首先创建一个a标签,href属性赋值为要下载文件对象的URL,然后调用a标签上的click()方法就可以下载file文件到本地了。

关于文件对象的URL怎么获得,这里要用到URL.createObjectURL(object)方法,参数object为一个File对象或者Blob对象,返回值就是一个UTF-16字符串,可以当作a标签的href属性值来使用。

注意:在使用完URL.createObjectURL()方法之后,要用URL.revokeObjectURL(url)来释放掉。

参数url为刚才生成的那个UTF-16字符串。详情参考https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let file = new File([data], "fileName.obj");/*创建一个file文件*/
/*let blob = new Blob([data]);*/
/*download属性是HTML5新增的属性,也就是作用在HTML5的基础之上,他可以使a标签的href属性进行下载,download属性为下载后的文件名*/
let aTag = document.createElement('a');/*创建一个a标签*/
aTag.download = file.name;
let href = URL.createObjectURL(file);/*获取url*/
aTag.href = href;
aTag.click();
URL.revokeObjectURL(href);/*释放url*/

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取,也可以转换成 ReadableStream 来用于数据操作。

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Blob

FileRaeader对象用于读取本地的文件:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

URL.createObjectURL() 静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。参数为用于创建 URL 的 File 对象、Blob 对象或者 MediaSource 对象。​

https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

Jquery相关操作

 serialize(),序列表表格内容为字符串。

serializeArray(),序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。返回的JSON对象是由一个对象数组组成的,其中每个对象包含一个或两个名值对——name参数和value参数(如果value不为空的话)

上传的图片大小检测

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
let  nImg = new Image();

nImg.src=URL.createObjectURL(file.data);
nImg.onload=function (){
     if(this.width>1440 || this.width>1080){
        layer.msg("图片宽度最大分辨率不能超过1440x1080!",{time:3000},function (){
        uppy.removeFile(file.id); /*删除选项*/
     });
 }
}

PHP上传大文件需要进行的修改

web请求php执行时间受到2方面控制,一个是php.ini的max_execution_time(要注意的是sleep,http请求等待响应的时间是不算的,这里算的是真正的执行时间),另一个是php-fpm request_terminate_timeout 设置,这个算的是请求开始n秒。

1.PHP部分

file_uploads on 是否允许通过HTTP上传文件的开关。默认为ON即是开 upload_tmp_dir – 文件上传至服务器上存储临时文件的地方,如果没指定就会用系统默认的临时文件夹 upload_max_filesize 8m 望文生意,即允许上传文件大小的最大值。默认为2M post_max_size 8m 指通过表单POST给PHP的所能接收的最大值,包括表单里的所有值。默认为8M max_execution_time 600 每个PHP页面运行的最大时间值(秒),默认30秒 max_input_time 600 每个PHP页面接收数据所需的最大时间,默认60秒 memory_limit 8m 每个PHP页面所吃掉的最大内存,默认8M

2.Nginx部分

可以选择在http{ }中设置:client_max_body_size 20m; 也可以选择在server{ }中设置:client_max_body_size 20m; 还可以选择在location{ }中设置:client_max_body_size 20m; 三者有区别 设置到http{}内,控制全局nginx所有请求报文大小 设置到server{}内,控制该server的所有请求报文大小 设置到location{}内,控制满足该路由规则的请求报文大小

send_timeout 60; fastcgi_connect_timeout 300; fastcgi_send_timeout 300; fastcgi_read_timeout 300;

实际上传不受 keepalive_timeout 时间影响,和该项配置无关,而且这个时间加长会严重影响 nginx 的并发

send_timeout , 客户端上传时网络断流后超过 60s 则停止接收接收操作,中断连接。只要持续发送数据则不会断掉

3.客户端部分

修改客户端执行上传时,限制的超时时间。

UNIAPP部分

"networkTimeout" : { "request" : 3600000, "uploadFile" : 3600000, "downloadFile" : 3600000 }

文件上传进度

Mozilla:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/upload

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-09-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Projects: 前端怎么处理二进制文件下载
type,默认值为 "",它代表了将会被放入到blob中的数组内容的MIME类型。 endings,默认值为"transparent",用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个: "native",代表行结束符会被更改为适合宿主操作系统文件系统的换行符,或者 "transparent",代表会保持blob中保存的结束符不变
西南_张家辉
2021/02/02
9230
Vue实现文件上传和文件下载
文件下载: 文件下载通常有几种方法 1.通过url下载 2.location.href 3.form提交直接下载 4.HTML5 a.download结合blob对象进行下载 第一种方式: 第一种方法是前后端的接口只给了一个API请求: 前端第一个实现是使用a标签, 第二种方式: 这个方法是直接把 DataURLs 或者 BlogURLs 传到浏览器地址中触发下载。有两种方式:
全栈程序员站长
2022/09/14
1.1K0
(干货)前端实现导出excel的功能
导出功能其实在开发过程中是很常见的,平时我们做导出功能的时候基本都是后台生成,我们直接只需要调一支接口后台把生成的文件放到服务器或者数据库mongodb中,如果是放到mongodb中的话,我们需要从mongodb中通过唯一生成的id去拿到文件,最后window.location.href就完事了。如果是放到服务器上,直接从服务器上下载就好了。下面我们使用另一种 H5 的新特性blob[1]对象来实现一下导出功能。
小丑同学
2020/09/20
1.4K0
图片上传预览插件制作----URL.createObjectURL()
URL.createObjectURL()静态方法会创建一个 DOMString,其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 # 2.兼容性
Rattenking
2021/01/29
2.4K0
通过 web 录制视频(摄像头)并上传
在用户通过提示允许的情况下,打开系统上的相机或屏幕共享和/或麦克风,并提供 MediaStream 包含视频轨道和/或音频轨道的输入。
张云飞Vir
2021/04/28
2K0
从图片裁剪来聊聊前端二进制
首先判断window.navigator.msSaveOrOpenBlob是为了兼容IE(谁要兼容这 xxIE!!)
前端森林
2020/08/21
1.6K0
从图片裁剪来聊聊前端二进制
DOMString、Document、FormData、Blob、File、ArrayBuffer (转)
我大学那会儿,一个称为Ajax的东西对前端行业造成了深远影响,不仅是JS语言,而包括前端地位、职位兴起以及工作分工等。抛开IE6浏览器不谈,其他浏览器的Ajax实际上都是借助XMLHttpRequest实现的。
javascript.shop
2019/09/04
2.8K0
DOMString、Document、FormData、Blob、File、ArrayBuffer (转)
一文带你层层解锁「文件下载」的奥秘
大家好我是秋风,今天带来的主题是关于文件下载,在我之前曾经发过一篇文件上传的文章(一文了解文件上传全过程(1.8w字深度解析,进阶必备),反响还不错,时隔多日,由于最近有研究一些媒体相关的工作,因此打算对下载做一个整理,因此他的兄弟篇诞生了,带你领略文件下载的奥秘。本文会花费你较长的时间阅读,建议先收藏/点赞,然后查看你感兴趣的部分,平时也可以充当当做字典的效果来查询。
秋风的笔记
2020/10/27
1.1K0
一文带你层层解锁「文件下载」的奥秘
Blob、ArrayBuffer、File、FileReader和FormData的区别
Blob、ArrayBuffer、File、FileReader、FormData这些名词总是经常看到,知道一点又好像不知道,像是同一个东西好像又不是,总是模模糊糊,最近终于下决心要弄清楚。
码客说
2019/10/22
5.1K0
说说几个 API 和应用案例
除了 classList.contains 方法之外,还有一个 node.contains 方法,这个方法返回的是一个布尔值,来表示传入的节点是否为该节点的后代节点。语法:
多云转晴
2020/03/26
1.8K0
说说几个 API 和应用案例
浅析 FormData
在日常开发中都是使用公司内部封装好的 request,一直没太注意请求参数类型,源于一次常规需求, 服务端提出:之前的请求参数有问题,需要调整,经过排查后发现之前的 Request Headers 的 Content-Type 字段值为 application/json ,与服务端解码规则不同,可见这篇文章《SpringBoot 是如何解析参数的 (https://juejin.cn/post/6844903841775747079)》,需要更改为 multipart/form-data,配合改完后,问题解决,也顺便总结一下。
政采云前端团队
2022/03/29
1.8K1
浅析 FormData
Blob、File、ArrayBuffer、TypedArray、DataView究竟应该如何应用
Blob、File、ArrayBuffer、TypedArray、DataView、Object URL ..等等 Web 应用中有关于进制的应用你了解多少?
19组清风
2022/05/11
1.9K0
Blob、File、ArrayBuffer、TypedArray、DataView究竟应该如何应用
你不知道的 Blob
如果你允许用户从你的网站上下载某些文件,那你可能会遇到 Blob 类型。为了实现上述的功能,你可以很容易从网上找到相关的示例,并根据实际需求进行适当的调整。对于部分开发者来说,在完成上述功能之后,他们并不会继续思考 Blob 是什么?
阿宝哥
2020/06/03
4.3K0
前端实现文件下载功能的三种方式
已知文件的地址,可以通过上面的方式将地址放入href属性内,download属性存放下载文件的名称,此属性为必须。
acoolgiser
2020/05/21
11.4K0
关于 Blob
对于 Blob,前端开发中可能比较少遇到;数据库中可使用 Blob 概念,例如 Mysql 存储二进制数据的类型就是 Blob,也就是说图片可存储于数据库中,以二进制格式存储
Krry
2020/05/17
2.7K0
玩转前端图片上传
本文讲的图片上传,主要是针对上传头像的。大家都知道,上传头像一般都会分成以下 4 个步骤:
JowayYoung
2020/04/01
3.1K0
玩转前端图片上传
Vue文件上传、下载
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148649.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/04
4960
《你不知道的 Blob》番外篇
原文对 Blob 的知识点介绍得非常完整清晰,本文通过四个问题来总结本文核心知识:
pingan8787
2020/06/08
2.6K0
vue实现文件上传和下载_vue上传文件前端完整实例
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/170636.html原文链接:https://javaforall.cn
全栈程序员站长
2022/09/22
4K0
vue实现文件上传和下载_vue上传文件前端完整实例
使用 JavaScript 创建并下载文件
本文将介绍如何使用 JavaScript 创建文件,并自动/手动将文件下载。这在导出原始数据时会比较方便。
零式的天空
2022/03/28
1.8K0
使用 JavaScript 创建并下载文件
相关推荐
Projects: 前端怎么处理二进制文件下载
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验