无法在 IOS 和 Android 移动设备上选择文件

Posted 2023-05-06

【中文标题】无法在 IOS 和 Android 移动设备上选择文件

【英文标题】：Unable to select files on Mobile both IOS and Android

【发布时间】：2021-08-15 21:21:14

【问题描述】：

我正在尝试能够上传图像以自动更改表格的背景，但它仅适用于台式机，它不适用于ios和android，任何人有任何指示吗？提前致谢。

const frame = document.getElementById('table');
const file = document.getElementById('file');
const reader = new FileReader();
reader.addEventListener("load", function () 
  frame.style.backgroundImage = `url($ reader.result )`;
, false);
file.addEventListener('change',function() 
  const image = this.files[0];
  if(image) reader.readAsDataURL(image);
, false)

【参考方案1】：

尝试使用对象网址

document.body.id = 'table'

const [style, file] = document.querySelectorAll('#table, #file')

file.addEventListener('change', img => 
  [img] = file.files
  style.backgroundImage = img ? `url($URL.createObjectURL(img))` : ''
)

<input type=file id=file accept="image/*">

【讨论】：

太酷了，非常感谢 querySelectorAll 也很好，感谢我不知道它的存在 :)

querySelector() 将根据 css 查询匹配任何第一个给定的选择器，querySelectorAll() 将找到所有项目