嵌入iFrame的NextJs文件选择器在安卓iOS仅首次生效问题排查

我正在开发一个NextJs项目，需实现文件选择器功能，整个项目被嵌入iFrame中供安卓和iOS项目使用。该功能在网页端正常，但在安卓和iOS端出现问题：当用户点击选择按钮后取消文件选择，再次点击按钮时无响应，onChange事件不再触发。

我的代码如下：

<input
    type="file"
    style={{ display: "none" }}
    onChange={(event) => {
        handleInputImages(event.currentTarget.files);
        event.target.value = null;
        event.currentTarget.value = null;
    }}
    accept="image/png, image/jpeg"
    ref={imgInput}
/>
<Button
    variant="primary"
    size="lg"
    onClick={() => imgInput.current.click()}
>
    Parcourir
</Button>

const handleInputImages = (files) => {
    if (files) {
        for (const file of files) {
            const pattern = /image-*/;
            const reader = new FileReader();
            if (!file.type.match(pattern)) {
                alert("invalid format");
                return;
            }

            const fileSizeKiloBytes = file.size / 1024;
            if (fileSizeKiloBytes > MAX_FILE_SIZE) {
                setFileError(true)
                return;
            }

            reader.onload = async (e) => {
                let reader = e.target;
                var newImage = (reader.result as any).replace(
                    /^data:image\/[a-z]+;base64,/,
                    ""
                );
                setSelectedImage(newImage);
                setFileError(false)
            };
            reader.readAsDataURL(file);
        }
    }
    imgInput.current.value = null;
};

我尝试将相关值设为null但未解决问题，在handleInputImages中添加的提示仅首次触发，推测onChange仅执行一次。请问我遗漏了什么？

核心原因 #

移动端WebView（iOS WKWebView/安卓系统WebView）在iframe环境下，只有用户实际选择文件时才会触发input的onChange事件，取消选择不会触发该事件。你当前只在onChange里重置input.value，取消时完全没执行重置逻辑，导致input状态残留——即使是空值，移动端WebView也会判定为未变更，再次点击时不会触发新的选择弹窗，自然也不会触发onChange。

另外，handleInputImages里的imgInput.current.value = null只会在files存在时执行，用户取消选择时files为null，这行代码根本不会跑。

解决方案 #

要在触发文件选择前强制重置input状态，同时监听取消事件（针对支持的WebView），确保每次操作后input都回到初始状态。

修正后的代码 #

import { useRef } from 'react';

// ... 组件其他逻辑

const imgInput = useRef(null);

const handleInputClick = () => {
    // 点击选择按钮时先强制重置input值，确保每次都是全新的选择请求
    if (imgInput.current) {
        imgInput.current.value = '';
    }
    imgInput.current?.click();
};

const handleInputChange = (event) => {
    handleInputImages(event.currentTarget.files);
    // 选择文件后重置input值
    event.target.value = '';
};

// 监听取消事件（适配支持该事件的移动端WebView）
const handleInputCancel = () => {
    if (imgInput.current) {
        imgInput.current.value = '';
    }
};

const handleInputImages = (files) => {
    if (!files || files.length === 0) return;

    for (const file of files) {
        // 修正正则：原/image-*/会匹配错误的MIME类型，改为精准匹配图片格式
        const pattern = /image\/(png|jpeg)/;
        if (!file.type.match(pattern)) {
            alert("invalid format");
            return;
        }

        const fileSizeKiloBytes = file.size / 1024;
        if (fileSizeKiloBytes > MAX_FILE_SIZE) {
            setFileError(true);
            return;
        }

        const reader = new FileReader();
        reader.onload = (e) => {
            const readerResult = e.target?.result as string;
            const newImage = readerResult.replace(/^data:image\/[a-z]+;base64,/, "");
            setSelectedImage(newImage);
            setFileError(false);
        };
        reader.readAsDataURL(file);
    }
};

// 渲染部分
return (
    <>
        <input
            type="file"
            style={{ display: "none" }}
            onChange={handleInputChange}
            onCancel={handleInputCancel}
            accept="image/png, image/jpeg"
            ref={imgInput}
        />
        <Button
            variant="primary"
            size="lg"
            onClick={handleInputClick}
        >
            Parcourir
        </Button>
    </>
);

关键修改点 #

1. 点击选择按钮时先重置input.value：不管用户之前是选择文件还是取消，每次点击都强制清空input.value，让浏览器认为是新的选择操作，确保弹窗能正常触发。
2. 添加onCancel事件监听：针对支持该事件的WebView，在用户取消选择时重置input状态，避免残留。
3. 修正正则表达式：原/image-*/逻辑错误，改为/image\/(png|jpeg)/精准匹配合法图片类型。
4. 优化逻辑判断：handleInputImages开头先判断files有效性，避免无效循环；移除重复的imgInput.current.value = null，统一在事件回调里处理。

兼容不支持onCancel的WebView #

如果部分安卓WebView不支持onCancel，可以补充onBlur事件处理：

const handleInputBlur = () => {
    // 延迟重置，避免干扰正常选择流程
    setTimeout(() => {
        if (imgInput.current) {
            imgInput.current.value = '';
        }
    }, 100);
};

// 在input上添加该事件
<input
    // ...其他属性
    onBlur={handleInputBlur}
/>

文件选择弹窗关闭时input会失去焦点，触发onBlur来重置状态，覆盖更多兼容场景。

内容的提问来源于stack exchange，提问作者Amine