|
|

楼主 |
发表于 2022-6-6 07:57
|
显示全部楼层
核心技术:
一、调出打开本地文件对话框(HTML)
用 input 标签,type="file" 时 input 标签将打开本地资源管理器。file 性质的input 可以过滤文件类型,对应属性为 accept,它规范 input file 可接受的文件类型,支持多个文件类型的规范。本例 input 标签代码:
<input type="file" id="file" accept=".mp3, .ogg, .wav, .acc, .webm" />
① type="file" 规定了 input 的作用:用于打开本地文件;
② id="file" 给元素定义自定义的id标识符
③ accept=".mp3, .ogg, .wav, .acc, .webm" 规定了对话框能打开什么类型的文件
二、处理用户打开后的结果(JS)
(一)通过JS内置的 files 函数可得到用户打开打开的文件列表数据,以数组形式存储用户选择的文件数据,我们只需该数组的第一项:
let fileAr = obj.files;
let filename = fileAr[0];
这将从 obj 对象(即 input file对象)给出的结果中得到文件名。
(二)将文件转换为URL地址
JS内置一个API接口,即 URL API,可将本地被选择的文件转换成url,为 audio、img 等提供可供使用的资源。我们知道,HTML的元素不能直接使用本地资源,所以要这么做。语句:
URL.createObjectURL(文件名)
例如,我们在前面获得了文件名 filename,audio 所需的 src 就可以通过 URL API 来转换为可用的 url 资源:
aud.src = URL.createObjectURL(filename)
|
|