Question

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

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

感谢。

Answer 1

我们通过在input元素上添加“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");
        }
    });
}

Answer 2

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

这不适用于移动设备上的本机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');
}

Answer 3

我也面临同样的问题，由于accept属性，facebook和instagram应用程序内浏览器都存在文件上传元素的问题。奇怪的是，在iOS中没有问题，但是在所有android中，输入类型文件都无法打开ontouch。因此，像上面一样，我还添加了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');
}

Answer 4

同样的问题。

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

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

Mozilla / 5.0（iPhone; CPU iPhone OS 8_1_1，如Mac OS X） AppleWebKit / 600.1.4（KHTML，如Gecko）Mobile / 12B435 [FBAN / FBIOS; FBAV / 18.0.0.14.11; FBBV / 5262967; FBDV / iPhone5,2; FBMD / iPhone; FBSN / iPhone OS; FBSV / 8.1.1; FBSS / 2; FBCR / T-Mobile的; FBID /电话; FBLC / EN_US; FBOP / 5]

Answer 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" />

Answer 6

我也遇到过同样的问题，但是它不是multiple或accept属性，而是用户是否授予了基础应用程序（Facebook，Messenger，IG等）的权限访问照片。您知道如何为这种情况构造后备吗？

Answer 7

为了解决这个问题，我必须做出改变

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

添加图像/* 使其工作

Answer 8

我已经尝试了上述所有解决方案，并推断它们可能会根据 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 上发现了不同的错误异常，我不知道如何重现或修复，或者修复是否可行。

Answer 9

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

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

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

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

9 个答案: