qq浏览器x5内核奇怪的问题,微信中也存在

发布于 2022-09-01 12:49:41 字数 3077 浏览 22 评论 0

在微信下用了一个jquery.ajaxfileupload的插件,然后iphone和安卓系统自带的浏览器,电脑上的所有浏览器都没问题,选择文件就上传了

就是在微信qq内置的浏览器,都是x5内核的,浏览器标识符是MQQBrowser的

第一次选择文件总是没反应,必须第二次选择,而且选择不一样的文件才能上传?有人遇到过这个问题吗?

下面是demo的代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="js/jquery-1.10.2.js"></script>
        <script src="js/jquery.ajaxfileupload.js"></script>
        <style>
        .hidden{
            display:none;
        }
        span{display:block;}
        </style>
    </head>
    <body>
        <input class="hidden" type="file" id="file1" value="nothing">
        <input type="button" value="上传" id="btn">
        <span id="show">this is show span</span>
        <span id="tip"></span>
        <span id="tip1"></span>
        <span id="tip2"></span>
        <span id="tip3"></span>
        <span id="tip4"></span>
        <span id="tip5"></span>
        <span id="tip6"></span>
        <span id="tip7"></span>
        <script>
        var file1 = $('#file1');
        var tip = $('#tip');
        var tip1 = $('#tip1');
        var tip2 = $('#tip2');
        var tip3 = $('#tip3');
        var tip4 = $('#tip4');
        var tip5 = $('#tip5');
        var tip6 = $('#tip6');
        var tip7 = $('#tip7');
        $(function(){
            $('#btn').click(function(e){
                file1.get(0).click();
                file1.ajaxfileupload({
                    action: 'http://www.savokiss.com/upload',
                    params:{
                        kind: 1
                    },
                    dataType:'json',
                    onComplete:function(data){
                        console.log('in complete');
                        console.log(data);
                    },
                    onStart:function(){
                        tip1.html('in start;');
                        console.log('start');
                        $('#show').html($('#file1').val());
                    },
                    onCancel:function(){
                        console.log('in cancel');
                    }
                });
            });
        });
        </script>
    </body>
</html>

文件地址

下面是修改过的插件的代码地址:ajaxfileupload

下面是demo地址:demo

demo的二维码:图片描述

demo说明

  • 用电脑端或手机自带浏览器打开demo端,点击上传随便选择一个文件,然后文件名就会显示出来了
    图片描述
  • 用微信内置浏览器或者手机qq打开上面的demo链接,第一次选择文件就不会有文件名显示出来,因为change事件没有作用,第二次选择不同的文件才会显示

有谁遇到过么,该怎么解决啊?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

暖树树初阳… 2022-09-08 12:49:41

是ajaxfileupload调用顺序问题,把file1.ajaxfileupload放在click外面先调用就可以了。。。。

推测

在MQQBrowser下,当input被点击的时候,也就是上面代码执行到:
$('#btn').click(function(e){
先执行的
file1.get(0).click();
然后调用webview的弹出选择文件,下面的阻塞掉了

选择完文件再执行下面的方法,但是此时input的值已经改变,所以没有触发插件中的change事件,导致第一次选择不能触发上传

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文