HTML5——FileAPI（一）：FileAPI接口

最新推荐文章于 2025-06-25 14:13:31 发布

is_Del

最新推荐文章于 2025-06-25 14:13:31 发布

阅读量835

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： html5 javascript

本文链接：https://blog.csdn.net/del1026/article/details/115771764

这篇博客介绍了HTML5中的FileAPI接口，包括File接口、FileList接口、FileReader接口和URL接口的使用。内容涉及FileSystem API，用于持久保存磁盘文件系统的数据，并强调在H5中可以通过multiple属性实现多文件选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day8

今日份内容：FileAPI中的一些常用接口。

HTML5中新增了FileSystem API，用于将数据永久保存在磁盘的文件系统中，该空间下的数据相对比较安全，必须由用户通过应用程序来删除，而不会在用户不知情情况下清除。

FileAPI接口

File接口的操作
FileList接口的操作
FileReader接口的操作
URL接口的操作

内容

File接口、FileList接口、FileReader接口、URL接口

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>File接口</title>
		<style type="text/css">
			div {
    
    
				display: block;
			}

			#hBlock {
    
    
				color: bisque;
				background-color: coral;
				height: 5px;
				border: solid;

			}
		</style>
		<link rel="stylesheet" type="text/css" href="FileReaderAPI/fileList/css/styles.css" />
	</head>
	<body>
		<!-- Blob对象的size和type属性的用法 -->
		<div>
			选择文件：<input type="file" id="myFile" multiple />
			<input type="button" value="显示文件信息" onclick="getInfoFromFile()" />
			<hr>
			文件大小：<span id="fileSize"></span>字符<br>
			文件类型：<span id="fileType"></span>
			<script type="text/javascript">
				function getInfoFromFile() {
    
    
					var files = document.getElementById("myFile").files;
					document.getElementById("fileSize").innerHTML = files[0].size;
					document.getElementById("fileType").innerHTML = files[0].type;
				}
			</script>
		</div>
		<hr id="hBlock">

		<!-- 使用File对象读取文件的基本信息和创建一个新的文件 -->
		<div id="">
			选择文件：<input type="file" id="myFile" multiple="multiple" />
			<input type="button" value="显示文件信息" onclick="getInfoFromFile()" />
			<hr>
			文件名称：<span id="fileName"></span><br>
			文件大小：<span id="fileSize">