iOS 上無法觸發 createElement 的檔案上傳

寫檔案上傳時，有自己的按鈕樣式
很常會使用 createElement('input') 並設定 type=file，搭配 onchange 就可以做一個自定義的檔案上傳按鈕
如下一個簡單的範例

function uploadFiles() {
    fileInput = document.createElement('input');
    fileInput.setAttribute('type', 'file');
    fileInput.setAttribute('multiple', 'multiple');
    fileInput.setAttribute('accept', 'image/jpg, image/jpeg, image/png, image/gif');

    fileInput.onchange = async () => {
        if (fileInput.files === null || fileInput.files[0] === null) return;
        const res = await UPLOAD_TO_SERVER(fileInput.files);
    }
    fileInput.click();
}

在 Chrome 或各種常見的瀏覽器上都沒問題，但在 iOS 上卻會發現功能似乎時好時壞的
原因是因為 Safari 不會觸發 onchange 事件

照著參考資料的解法
直覺想法就是調整成 append 到 body 上，再移除掉

看其留言討論都有解決了，但我就跟那唯一留言不能運作的一樣= =
在iOS上，用起來仍是時好時壞…

解法

最後我不透過 append 加 dom。而是真的在畫面上放一個 input，邏輯寫在 onchange 事件
並用 css 隱藏掉

然後在自己的按鈕上，透過 onClick 觸發這個 input 的 click 事件，才總算在 iOS 上穩定運作

Safari 已然成為新一代的 IE…

參考資料

javascript file input onchange not working [ios safari only]