本文介绍如何利用HTML5的File和FileReader接口实现前端文件上传预览。通过readAsDataURL方法将文件转换为Base64字符串，可直接用于前端图像展示或发送至后端解码。文章同时解析了JavaScript单线程模型下的异步回调机制，确保文件读取完成后再安全获取内容。
HTML5文件API简介
1. FILE API
HTML5规范引入了File和FileReader两个核心接口，开发者可以利用它们来获取本地文件的基本信息，并读取文件的具体内容。
2. example
文件上传预览实现示例
<html>
<body>
<div id="test-image-preview"
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </div>
<br/>
<div id="test-file-info"></div>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file-info'),
preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
// 清除背景图片:
preview.style.backgroundImage = '';
// 检查文件是否选择:
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
// 获取File引用:
var file = fileInput.files[0];
// 获取File信息:
info.innerHTML = '文件: ' + file.name + '<br>' +
'大小: ' + file.size + '<br>' +
'修改: ' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
// 读取文件:
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
// 以DataURL的形式读取文件:
reader.readAsDataURL(file);
});
</script>
</body>
</html>通过DataURL格式读取到的文件，最终表现为一个字符串，其结构通常类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...，其中包含了经过Base64编码的文件数据。
这种格式常用于在前端直接设置图像显示。若需服务器端处理，只需提取字符串中base64,之后的部分发送给服务器，并在服务端进行Base64解码，即可还原出原始文件的二进制内容。
JavaScript单线程与异步机制解析
3. 解释
上述代码示例展示了JavaScript的一个关键特性：单线程执行模式。在JavaScript环境中，浏览器的执行引擎始终以单线程模式运行代码，这意味着在任何给定时刻，JavaScript代码不可能同时拥有多于一个的执行线程。
读者可能会疑惑，采用单线程模式的JavaScript是如何处理多任务并发处理的？
在JavaScript中，所谓的“多任务”处理实际上都是基于异步调用机制实现的。例如在前面的代码片段中：
reader.readAsDataURL(file);
这行代码会发起一个异步操作来读取文件内容。由于该操作是异步的，JavaScript主线程无法预知操作何时结束，因此必须预先注册一个回调函数来处理结果。
reader.onload = function(e) {
// 当文件读取完成后，自动调用此函数:
};当文件读取操作完成后，JavaScript引擎会自动触发并调用我们设置的回调函数。此时，文件内容已完全读取完毕，我们可以在回调函数内部安全地访问并使用这些文件数据。
以上关于js上传文件预览的简单实例内容，旨在为开发者提供参考，希望能对大家有所帮助，也欢迎大家继续支持本站获取更多技术分享。