HTML5——FileAPI（二）：FileSystem API上

最新推荐文章于 2023-08-21 00:13:41 发布

is_Del

最新推荐文章于 2023-08-21 00:13:41 发布

阅读量533

点赞数

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

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

版权

Day9

今日份内容：FileSystem API的使用

当应用程序中需要使用大量的二进制数据或其他非Web程序共享数据时，本地数据库并不能满足用户的需求，可以使用FileSystem API来解决上述问题，将用户的数据临时或永久的存储到计算机中。

FileSystem API

申请磁盘配额
访问本地文件系统
文件操作

内容

创建文件、写入文件、文件追加数据、读取文件、删除文件

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getFile创建文件</title>
		<style type="text/css">
			div {
    
				display: block;
			}

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

			}
		</style>
	</head>
	<body>
		<!-- 请求访问本地文件系统 -->
		<!-- <div id="">
		<input type="button" value="发出请求" οnclick="createFile()" /><hr >
		<output id="result"></output>
		<script type="text/javascript">
			window.requestFileSystem = window.requestFileSystem||window.webkitRequestFileSystem;
			navigator.webkitPersistentStorage.requestQuota(1024*1024,
				function(grantedBytes){
					console.log("磁盘空间申请成功，空间大小为："+grantedBytes);
				},
				function(errorCode){
					console.log("磁盘空间申请失败");
				}
			);
			function createFile(){
				window.requestFileSystem(window.PERSISTENT,1024*1024,
					//successCallback回调方法
					function(fileSystem){
						console.log("fileSystem.name="+fileSystem.name);
					},
					//errorCallback回调方法
					function(error){
						console.log(error.name);
					}
				);
			}
		</script>
		</div><hr id="hBlock"> -->

		<!-- getFile创建文件 -->
		<div id="">
			<div id="">
				文件名：<input type="text" id="fileName" value="test.txt" /><br>
				文件大小：<input type="text" id="fileSize" value="1024" /><br>
				<input type="button" value="创建文件" onclick="createFile()" />
				<hr>
				<output id="result"></output>
			</div>
			<script type="text/javascript">
				window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
				navigator.webkitPersistentStorage.requestQuota(1024 * 1024,
					function(grantedBytes) {
    
						console.log("磁盘空间申请成功，空间大小为：" + grantedBytes);
					},
					function(errorCode) {
    
						console.log("磁盘空间申请失败");
					}
				);

				function createFile() {
    
					var fileSize = document.getElementById("fileSize").value;
					window.requestFileSystem(window.PERSISTENT, fileSize, successCallback, errorCallback);
				}

				function successCallback(fileSystem) {
    
					var fileName = document.getElementById("fileName").value;
					fileSystem.root.getFile(fileName, {
    
							create: true
						},
						function(fileEntry) {
    
							var text = "完整路径：" + fileEntry.fullPath + "<br/>文件名：" + fileEntry.name;
							document.getElementById("result").innerHTML = text;
						},
						function(error) {
    
							console.log(error.name);
							switch (error.name) {
    
								case &

最低0.47元/天解锁文章

is_Del

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5——FileAPI（二）：FileSystem API上

Day9今日份内容：FileSystem API的使用当应用程序中需要使用大量的二进制数据或其他非Web程序共享数据时，本地数据库并不能满足用户的需求，可以使用FileSystem API来解决上述问题，将用户的数据临时或永久的存储到计算机中。FileSystem API申请磁盘配额访问本地文件系统文件操作内容创建文件、写入文件、文件追加数据、读取文件、删除文件代码<!DOCTYPE html><html> <head> <meta
复制链接

扫一扫