基于HTML5的移动Web应用——文件操作

Meryoufdd

墨衍会员 · AI 创作全网分发码龄5年

关注

转载最新推荐文章于 2026-03-30 08:00:00 发布 451 阅读 AI 写同款· GEO 优化 ›

uniapp iosApp H5+本地文件操作(写入修改删除等) 以csv文件为例，写入读取保存修改删除文件内容，传输文件等阅读详情

过去Web程序不能替代桌面程序的一个重要原因就在于浏览器对于文件操作API的缺失。照片处理中的裁剪、滤镜，二维码的读取与识别，文档的查看和编辑等，这些操作无一不依赖文件的操作，HTML5赋予了浏览器几乎和本地程序同等强大的文件操作能力。

File API是HTML5在DOM标准中添加的功能，它允许Web内容在用户授权的情况下选择本地文件并读取内容一通过 File，FileList 和FileReader等对象共同作用来实现。

选择文件

1、通过表单选择文件

由于Web环境的特殊性，为了考虑文件安全问题，浏览器不允许JavaScript直接访问文件系统，但可以通过file类型的input元素或者拖放的方式选择文件操作。
<input type="file" id="thisFile"/>

File表单可以让用户选取一个或者多个文件(multiple 属性)，通过FileAPI，可在用户选择文件后访问到代表了所选文件列表的FileList对象，FileList 对象是一个类数组的对象，其中包含着一个或多个File对象。如果没有multiple属性或者用户只选了一个文件，那么只需要访问FileList对象的第一个元素：
var filelist=document.getElementById('thisFile') .files;
var selectedFile-filelist[0];

使用input元素时，用户在选择文件后会触发其change事件：
var inputElement=document.getElementById('thisFile')
inputElement. addEventListener ("change"，handleFiles, false)
function handleFiles(){
var fileList=this.files
}

和其他类数组对象一样，FileList 也有length属性，可以轻松遍历其File对象：
for (var i=0, numFiles=files.length ; i< numFiles; i++) {
var file=files[i]
……
}

File对象有3个很有用的属性，包括了关于该文件的许多有用信息。
(1) name: 文件名，不包含路径信息。
(2) size: 文件大小，以B为单位。
(3) type:文件的MIME type。
需要注意的是，这3个属性都是只读的。

2、通过拖曳来选择文件

使用拖曳的方式来选择文件的效果，需要通过访问dataTransfer的files属性来实现。
下面通过一个案例来演示具体效果，如示例所示。
【示例】　使用拖曳的方式选择文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
.dropzone{
width: 200px;
height: 100px;
border: 2px dashed #ddd;
text-align: center;
padding-top: 100px;
color: #999;
}
</style>
<body>
<div id="dropzone" class="dropzone">
拖曳文件到此处
</div>
<div id="output" class="output">

</div>
<script>
function getFileInfo(file) {
var aMultiples = ["KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], sizeinfo;
var info = '文件名：' + file.name ;
// 计算文件大小的近似值
for (var nMultiple = 0, nApprox = file.size / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sizeinfo = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + file.size + " bytes)";
}
info += "；大小：" + sizeinfo
info += "；类型：" + file.type

return info + '<br>'
}