Question

我已经创建了该登录页面，该登录页面是在使用php连接到路由器时触发的。它的格式很简单，其中一个是qr阅读器。我跟随this tutorial创建了图像上传器和解码器。

当我在浏览器上运行它时，它运行良好，但是通过登陆页面弹出将其放置时，在Android上不会触发文件上传，而在iPhone上，登陆页面只是关闭。

我怀疑发生这种情况是因为在iPhone上，您通常必须先关闭并破坏与路由器的连接，才能离开目标网页。因此，陷入僵局。

这是我的代码的js文件和html部分：

HTML：

<html>
    <head> 
            <title>QR Code Input</title>
            <link href="https://fonts.googleapis.com/css?family=Roboto:400,700i,700" rel="stylesheet">
            <link rel="stylesheet" type="text/css" href="./styles/index.css">
            <script type="text/javascript" src='./js/QRReader.js'> </script>
            <script src="./js/QRDecoder.js"> </script>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1" /> 
    </head>
    <body>
    <div id="center">
            <img src="./img/logoCBN.png">
            <h1>
                    Hello $name!
                    <p id="subheader">Please enter your login code</p>
            </h1>
            <form action="goto.php" method="post">
                    <input type="hidden" name="form" value="$form"/>
                    <input type="hidden" name="username" value="$mac"/>
                    <input type="hidden" name="password" value="$mac"/>
                    <input type=text size=20 name="qrcode" placeholder="Scan or enter login code" class=qrcode-text />
                    <label class=qrcode-text-btn>
                            <input type=file accept="image/*" capture=environment onclick="return showQRIntro();" onchange="openQRCamera(this);" tabindex=-1 />
                    </label> 
                    <p id="error"> $result </p>
                    <input id="submit" type="submit" value="Login"/>
                    <!--Additional data-->
                    <input type="hidden" name="link-login" value="$link_login" />
                    <input type="hidden" name="link-orig" value="$desired_url" />
                    <input type="hidden" name="gateway" value="$gateway" />
                    <input type="hidden" name="lok" value="$location" />
                    <input type="hidden" name="dst" value="$desired_url"/>
            </form>
    </div>
    </body>
    </html>

JS：

function openQRCamera(node) {
var reader = new FileReader();
reader.onload = function() {
  node.value = "";
  qrcode.callback = function(res) {
    if(res instanceof Error) {
      alert("No QR code found. Please make sure the QR code is within the camera's frame and try again.");
    } else {
      node.parentNode.previousElementSibling.value = res;
    }
  };
  qrcode.decode(reader.result);
};
reader.readAsDataURL(node.files[0]);
}

  function showQRIntro() {
    return confirm("Use your camera to take a picture of a QR code.");
   }

所以我的问题很简单，考虑到普通网站和登陆页面在文件上传方面的本质差异，我想做的事情甚至可能吗？

到目前为止，我尝试过的只是测试并查看JS部分是否被调用过，所以我确定这不是JS的问题，它只是在达到文件阅读器部分，只是在Android上转义，然后在iPhone上关闭页面。

使用FileReader从登录页面上的手机摄像头/图库中获取图像

0 个答案: