file to base64 本地转换

最新推荐文章于 2024-03-18 09:28:11 发布

imhp

最新推荐文章于 2024-03-18 09:28:11 发布

阅读量399

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/imhp/article/details/124410249

这段HTML代码展示了如何创建一个文件选择器，用户可以选择文件并将其转化为Base64编码。当文件被选中后，Base64字符串将显示在文本区域，并可以下载为txt文件。该过程使用了FileReader API进行文件读取和转换。

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

<html>

<body>
<div>
<div>
<label for="filePicker">Choose or drag a file:</label><br>
<input type="file" id="filePicker">
</div>
<br>
<div>
<h1>Base64 encoded version</h1>
<textarea id="base64textarea"
placeholder="Base64 will appear here"
cols="50" rows="15"></textarea>
</div>
</div>

fileInput.addEventListener('change', (e) => {

// get a reference to the file
const file = e.target.files[0];

// encode the file using the FileReader API
const reader = new FileReader();
reader.onloadend = () => {

// use a regex to remove data url part
const base64String = reader.result
.replace('data:', '')
.replace(/^.+,/, '');

myBlob = new Blob([base64String]);
var url = window.URL.createObjectURL(myBlob);
var link = document.createElement('a');
link.href = url;
link.setAttribute('download', "results.txt");
link.click();
// log to console
// logs wL2dvYWwgbW9yZ...
//console.log(base64String);
};
reader.readAsDataURL(file);});
</script>
</body>

</html>