大家好，欢迎来到IT知识分享网。
文件操作
简介
<input type="file" multiple> 属性
- multiple：表示是否选择多个文件
- accept：用于设置文件的过滤类型（MIME类型）
如果想要同时设置多个过滤类型，可以用英文逗号（,）隔开
<input type="file" accept="image/jpeg,image/png" />
常见的acept属性取值/MIME类型
| 属性值 | 说明 |
|---|---|
| image/jepg | JEPG图片 |
| image/png | PNG图片 |
| image/gif | GIF图片 |
| text/plain | TXT文件 |
| text/html | HTML文件 |
| text/css | CSS文件 |
| text/JavaScript | JS文件 |
| text/xml | XML文件 |
| audio/mpeg | MP3文件 |
| audio/mp4 | MP4文件 |
| application/msword | Word文件 |
| application/vnd.ms-powerpoint | PPT文件 |
| application/vnd.ms-excel | Excel文件 |
| application/pdf | PDF文件 |
| image/* | 所有图片文件 |
| audio/* | 所有声音文件 |
| video/* | 所有视频文件 |
实例
<form action=""> <!-- 选择单个文件 --> <input type="file"/><br/> <!-- 选择多个文件 --> <input type="file" multiple /> </form> 注意：为元素添加multiple属性后，就可以选择多个文件了。当选择成功后，按钮右侧不再显示文件的名称，而是显示文件的总量。当鼠标指针移到上面时，就会显示全部上传文件的详细列表
File对象
概念：在文件上传元素中，将会产生一个FileList对象，这是一个类数组对象，表示所有文件的集合。
其中，每一个文件就是一个File对象
想要获取某一个File文件对象
- 首先需要获取FileList对象
- 然后通过数组下标形式来获取
File对象属性
| 属性 | 说明 |
|---|---|
| name | 文件名称 |
| type | 文件类型 |
| size | 文件大小（单位为B） |
| lastModifiedDate | 文件最后的修改时间 |
实例：File对象的属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>file对象的属性</title> <script> window.onload=function(){
//获取FileList对象 var oFile=document.getElementById("file"); oFile.onchange=function(){
//获取第1个文件，即File对象 var file=oFile.files[0]; console.log("图片名称为:"+file.name); console.log("图片大小为:"+file.size+"B"); console.log("图片类型为:"+file.type); console.log("修改时间为:"+file.lastModifiedDate); }; } </script> </head> <body> <input type="file" id="file" accept="image/*" multiple /> </body> </html> 实例：转化单位
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>转化单位</title> <script> window.onload=function(){
var oFile=document.getElementById("file"); oFile.onchange=function(){
//获取第一个文件 var file=oFile.files[0]; //将单位"B"转化为"KB" var size=file.size/1024; var unitArr=["KB","MB","GB","TB"]; //转化单位 for(var i=0;size>1;i++){
var fileSizeString=size.toFixed(2)+unitArr[i]; size/=1024; } //输出结果 console.log("图片大小为:"+fileSizeString); }; } </script> </head> <body> <input type="file" name="file" id="file" accept="image/*" /> </body> </html> FileReader对象
概念：FileReader对象作为文件API用于读取文件。
FileReader对象可以读取文件中的数据和包含读取结果的事件模型。
FileReader对象方法
| 方法 | 说明 |
|---|---|
| readAsText | 将文本读取为“文本” |
| readAsDataURL | 将文本读取为”DataURL” |
| readAsBinaryString() | 将文本读取为“二进制编码“ |
| readAsArrayBuffer() | 将文本读取为一个”ArrayBuffer对象“ |
| abort() | 中止读取操作 |
FileReader对象事件
| 事件 | 说明 |
|---|---|
| onabort | 中断时触发 |
| onerror | 出错时触发 |
| onload | 文件读取成功完成时触发 |
| onloadend | 读取完成触发，无论成功或失败 |
| onloadstart | 读取开始时触发 |
| onprogress | 在读取数据过程中周期性调用 |
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/133481.html
