HTML5文件上传操作
一、File对象
在 HTML5 出现之前，在 Web 上没有文件创建和复制，也没有文件处理，HTML5 规范中包含 3 个文件相关的规范：“文件 API”“文件 API：目录和系统”以及“文件 API：写入器”，文件 API 包含 File 对象、FileList 对象和 FileReader 对象。
为了保障客户端安全，大部分浏览器都未实现“文件 API：目录和系统”和“文件 API：写入器”规范。而“文件 API”主要实现了读取文件，不能写入文件。
- File 对象代表一个文件，用来读写文件信息
- File 对象继承了 Blob 对象或者说是一种特殊的 Blob 对象，所有可以使用Blob 对象的场合都可以使用
- File 对象构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
文件上传:
<input type="file" name="file" multiple id="file">
<input type="button" value="上传文件" id="fileUpload">
<!-- 指定显示图片的位置 -->
<div id="box"></div>
<script>
// 1、获取文件
var file = document.querySelector("#file");
var fileUpload = document.querySelector("#fileUpload");
var box = document.querySelector("#box");
// 读取多个文件时，需要使用files属性
fileUpload.onclick = function(){
var files = file.files;
for(var i=0;i<files.length;i++)
{
var read = new FileReader();
read.onload = function()
{
var div = document.createElement("div");
div.innerHTML = "<img src='"+this.result+"' class="img"'">
box.appendChild(div);
}
read.readAsDataURL(files[i]);
}
}
</script>
</body>
</html>
浏览器原生提供一个 File() 构造函数，用来生成 File 实例对象：
var file = new File(array,name[,options]);File 对象配置对象的属性说明如下：
| 说明 | |
|---|---|
| type | 字符串，表示实例对象的 MIME 类型 |
| lastModified | 时间戳，表示上次修改的时间，默认为 Date.now() |
File 对象的属性和方法如下：
| 属性名 | 说明 |
|---|---|
| name | 文件名或文件路径 |
| size | 文件大小（单位：字节） |
| type | 文件的 MIME 类型 |
| lastModified | 最后修改时间 |
二、FileList对象
- FileList 对象是一个类似于数组的对象，代表一组选中的文件，每个成员都是一个 File 实例
- 文件选择器（<input type="file">）的 files 属性，返回一个 FileList 实例。
- 拖拉一组文件时，目标区的 DataTransfer.files 属性，返回一个 FileList 实例
- FileList 的实例属性主要是 length，表示包含多少个文件
- FileList 的实例方法主要是 item()，用来返回指定位置的实例
- FileList 的实例是一个类似于数组的对象，可以直接用方括号运算符，即 myFileList[0] 等同于 myFileList.item(0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
文件上传：<input type="file" name="file" multiple id="file">
<input type="button" value="上传文件列表" id="btn">
<script>
var btn = document.querySelector("#btn");
var file = document.querySelector("#file");
btn.onclick = function () {
// Alt+shift+f
//获取多个文件
var files = file.files;
for (var i = 0; i < files.length; i++) {
document.write("<hr>");
document.write("文件名：" + files[i].name+"，");
document.write("文件大小：" + files[i].size+"，");
document.write("文件修改时间：" + files[i].lastModified+"，");
}
}
</script>
</body>
</html>
参考文章：http://blog.ncmem.com/wordpress/2023/12/25/html5%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e6%93%8d%e4%bd%9c/
欢迎入群一起讨论
