文件上传控件在 Facebook 应用内浏览器中不起作用

Posted 2023-03-14

【中文标题】文件上传控件在 Facebook 应用内浏览器中不起作用

【英文标题】：File upload control not working in Facebook In-App Browser

【发布时间】：2014-11-18 17:51:16

【问题描述】：

我有一个移动 html Facebook 应用程序，它可以控制上传文件（一个简单的输入文件）。 当我在这样的浏览器中打开应用程序时，我可以正常上传apps.facebook.com/myapp。 但是，一旦我通过本机 Facebook 应用程序并将我的应用程序加载到新 FB 的内部浏览器中，上传控件就不起作用了。它在页面上，但什么也没做。

这是预期的行为吗？ 如果是这样，我该如何解决？ 我可以强制应用在 Chrome 等外部浏览器中打开吗？

谢谢。

【参考方案1】：

我们通过在输入元素上添加“Multiple”属性解决了这个问题。这似乎是 Facebook 浏览器中的一个错误。

这修复了 ios 的问题，但我们有一些报告称它在 android 中仍然无法正常工作。它还添加了一项检查，以查看他们是否上传了多个文件（因为这可能不是故意的，但元素允许这样做）。希望对你有帮助。

if (navigator.userAgent.match(/FB/)) 
    $('#myinput').attr('multiple',true);
    $('#myinput').change(function()
        if ($('#myinput')[0].files.length > 1) 
            //user trying to upload more than 1
            $('#myinput').value = '';
            alert("Sorry, only 1 file is allowed");
        
    );

【讨论】：

对我来说，正确的方法是下面@Lampros 回答提供的方法

【参考方案2】：

我也面临同样的问题，由于接受属性，facebook 和 instagram 应用内浏览器都存在文件上传元素的错误。奇怪的是，在 iOS 中没有问题，但在所有 android 中，输入类型文件都不会在触摸时打开。所以像上面一样，我还添加了 Instagram 的条件。准备好文档：

var isFacebookApp = function () 
   var ua = navigator.userAgent || navigator.vendor || window.opera;
   return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1 ) || (ua.indexOf("Instagram") > -1);
;

if (isFacebookApp()) 
    jQuery('#myinputfile').removeAttr('accept');

【参考方案3】：

同样的问题。

我目前找到的唯一解决方案是通过警告消息向访问者建议在 Safari（当然是 iPhone）中打开网站，并在 facebook 网络浏览器的右上角使用操作按钮。

这是一个特定的用户代理：

Mozilla/5.0（iPhone；CPU iPhone OS 8_1_1 像 Mac OS X） AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12B435 [FBAN/FBIOS;FBAV/18.0.0.14.11;FBBV/5262967;FBDV/iPhone5,2;FBMD/iPhone;FBSN/iPhone 操作系统；FBSV/8.1.1；FBSS/2； FBCR/T-Mobile；FBID/电话；FBLC/en_US；FBOP/5]

【参考方案4】：

对我来说，问题是文件输入的接受属性。

这不适用于移动设备上的原生 Facebook 浏览器：

accept=".jpg,.jpeg,.png,.svg,.tiff,.bmp,.webp,.bpg"

所以我的解决方案是检测它是否是本机 FB 浏览器，并删除该属性：

let isFacebookApp = function () 
    let ua = navigator.userAgent || navigator.vendor || window.opera;
    return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
;

if (isFacebookApp) 
   $('#myinput').removeAttr('accept');

【参考方案5】：

我最近使用以下代码[解决了]。 Please see the solution

不工作 <input type="file" class="file" id="image" accept="image/gif, image/jpg, image/jpeg, image/png" /> 工作 <input type="file" class="file" id="image" />

【参考方案6】：

为了解决这个问题，我不得不做出这个改变

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

添加图像/* 使其工作

【参考方案7】：

我已经尝试了上述所有解决方案，并推断它们可能会根据 Android 版本工作。

使用 Facebook 301.0.0.27.477 (2021-01-21) 进行测试：

Huawei P9 Lite / Android 7.0：浏览器正确打开文件选择器，您可以选择图像，但回到浏览器输入仍然显示“选择文件”。我们尝试了最简单的输入，使用accept，使用multiple，以及使用w3schools 简单输入示例，但是什么也没发生，没有change 事件，什么都没有——它根本不起作用。

LG G7 ThinQ / Android 10：使用accept=image/*、multiple 或不使用它们都可以完美运行。

最好的解决方案可能是告诉用户在 Chrome 中打开以便在您的应用程序中获得最佳体验（如 here 所说）。对于使用 Facebook 浏览器的其他设备，我们在 Sentry 上发现了不同的错误异常，我不知道如何重现或修复，或者是否可以修复。

【参考方案8】：

终于找到FB内置浏览器，只支持“accept”的几种写法。

和图片一样，在内置浏览器中，只有accept="image/*"(glob) 和accept="image/jpeg"(指定类型) 有效。

下面的演示是我的测试： https://codepen.io/iulo/full/LYRKOyO

【讨论】：

嗨@iulo，我已经测试了您的演示，并且遇到了与上一个答案中描述的完全相同的行为。华为 P9 Lite / Android 7.0 根本不工作，但 LG G7 ThinQ / Android 10 适用于所有输入示例（除了最后一个我认为它只是无效的）。