You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.0 KiB
33 lines
1.0 KiB
<button id="button">选择图片</button>
|
|
<p id="output"></p>
|
|
|
|
<script>
|
|
var eleButton = document.getElementById('button');
|
|
if (window.showOpenFilePicker && eleButton) {
|
|
eleButton.addEventListener('click', async function () {
|
|
// 打开文件
|
|
const arrFileHandle = await window.showOpenFilePicker({
|
|
types: [{
|
|
description: 'Images',
|
|
accept: {
|
|
'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
|
|
}
|
|
}],
|
|
multiple: true
|
|
});
|
|
|
|
// 遍历选择的文件
|
|
for (const fileHandle of arrFileHandle) {
|
|
// 获取文件内容
|
|
const fileData = await fileHandle.getFile();
|
|
// 读文件数据
|
|
const buffer = await fileData.arrayBuffer();
|
|
// 转成Blod url地址
|
|
let src = URL.createObjectURL(new Blob([buffer]));
|
|
// 在页面中显示
|
|
output.insertAdjacentHTML('beforeend', `<img src="${src}">`);
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|