html中上传文件,html5上传文件的几种方式
前言
HTML5中提供的文件API广泛应用于前端。上传、下载、阅读内容在日常交互中很常见。而且兼容所有浏览器，包括移动端，除了IE只支持IE10以上。想要更好的掌握操作文件的功能，首先要熟悉各个API。
FileList 对象和 file 对象
HTML中的input[type=file]标签有一个multiple属性，允许用户选择多个文件，而FileList对象就是用户选择的文件列表。列表中的每个文件都是一个文件对象。
文件的属性：名称：文件名，不包括路径。类型：文件类型。所有图像类型的文件都以image/开头，这可以限制只上传图像。大小：文件大小。可以根据文件大小执行其他操作。LastModified:文件的上次修改时间。输入type= file id= files multiple script var elem=document . getelementbyid( files )；elem . onchange=function(event){ var files=event . target . files；for(var I=0；I文件.长度；I) {//文件类型为图像，文件大小小于200kb if (files [i])。type.indexof (image/)！==-1个文件[i]。size 204800){ console . log(files[I].姓名)；在}} }/scriptinput中有一个accept属性，可以用来指定可以通过文件上传提交的文件类型。
Accept=image/* 可用于仅限制上传的图像格式。但是在Webkit浏览器下，存在响应慢的问题。在弹出文件选择框之前需要几秒钟。
解决方法是将*通配符改为指定的MIME类型。
输入类型=file accept=image/gif，image/jpeg，image/jpg，image/pngBlob 对象
Blob相当于一个容器，可以用来存储二进制数据。它有两个属性，size属性表示字节长度，type属性表示MIME类型。
如何创造
可以使用Blob()构造函数创建对象。
var blob=new Blob([hello]，{ type: text/plain })；Blob构造函数中的第一个参数是一个数组，它可以保存ArrayBuffer对象、ArrayBufferView对象、Blob对象和字符串。
Blob对象可以通过slice()方法返回一个新的Blob对象。
var newblob=blob.slice(0，5，{ type: text/plain })；slice()方法有三个参数，都是可选的。第一个参数表示要复制的二进制数据在Blob对象中的起始位置，第二个参数表示副本的结束位置，第三个参数是Blob对象的MIME类型。
Canvas.toBlob()也可以创建Blob对象。ToBlob()取三个参数，第一个是回调函数，第二个是图像类型，默认为image/png，第三个是图像质量，取值在0到1之间。
var canvas=document . getelementbyid( canvas )；canvas . to blob(function(blob){ console . log(blob)；}，图像/jpeg ，0.5)；下载文件
Blod对象可以通过窗口生成一个网络地址。URL对象，并结合A标签的下载属性实现下载文件的功能。
例如，下载画布作为图像文件。
var canvas=document . getelementbyid( canvas )；canvas . to blob(function(blob){//使用createObjectURL生成blob格式的地址：null/fd95b 806-DB11-4 f98-B2CE-5eb 16 b 38 ba 36 var URL=URL。CreateObject URL(blob)；var a=document . createelement( a )；a.download= canvasa.href=url//模拟一个tab点击下载a . click()；//下载后告诉浏览器不再需要保留这个文件对URL的引用. revokeobjecturl(URL)；});也可以用类似的方法将字符串保存为文本文件。
FileReader 对象
FileReader对象主要用于将文件读入内存，并读取文件中的数据。通过构造函数创建一个FileReader对象
var reader=new FileReader()；该对象有以下方法：
中止：中断读取操作。ReadAsArrayBuffer:将文件内容读入ArrayBuffer对象。ReadAsBinaryString:将文件作为二进制数据读取。ReadAsDataURL:以data: URL格式将文件作为字符串读取。ReadAsText:将文件作为文本读取。上传图片预览
常见的应用是在客户端上传图片后，通过readAsDataURL()显示图片。
input type= file id= files accept= image/JPEG，image/jpg，image/png img src= blank . gif id= preview script var elem=document . getelementbyid( files )，img=document . getelementbyid( preview )；elem . onchange=function(){ var files=elem . files，reader=new FileReader()；if(files files[0]){ reader . onload=function(ev){ img . src=ev . target . result；} reader . readasdataurl(files[0])；} }/script但是在一些手机上垂直拍照的时候上传照片会有bug，会发现照片是上下颠倒的，包括三星和iPhone。这里不解释解决方法。有兴趣可以去看看：移动端图片上传、旋转、压缩的解决方案。
数据备份与恢复
FileReader对象的readAsText()可以读取文件的文本。结合下载Blob对象文件的功能，可以实现数据导出文件到本地的备份。当要恢复数据时，通过input上传备份文件，通过readAsText()读取文本来恢复数据。
代码与上述函数类似，此处不再赘述。具体应用请参考记事本。
Base64 编码
HTML5中添加了Atob和btoa方法来支持Base64编码。它们的名字也很简单，b到a，a到b，分别代表编码和解码。
var a= https://Lin-Xin . github . io ；var b=btoa(a)；var c=atob(b)；console . log(a)；//https://Lin-Xin . github . io console . log(b)；//ahr 0 CHM 6 ly 9 saw 4 teglulmdpdgh 1y i5 pbw==console . log(c)；//3359lin-xin.github.iobtoa方法对字符串A进行编码，不改变A的值，返回编码后的值。
Atob方法对编码字符串进行解码。
但是参数中的汉字超出了8位ASCII字符的范围，所以浏览器会报错。因此，我们首先需要对中文进行编码。
Var= Hello Worldvar b=btoa(编码成分(a))；var c=decodeURIComponent(atob(b))；console . log(b)；//juu 1 jtk zjtg 4 juu 1 jtk 2 jujejtiwjuu 0 Jui 4 jtk 2 juu 3 jtk 1 jthd console . log(c)；//你好，上面的世界就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。