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

在微信下用了一个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事件没有作用,第二次选择不同的文件才会显示

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

阅读 8.4k
评论
    1 个回答

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

    推测

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

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

      撰写回答

      登录后参与交流、获取后续更新提醒

      相似问题
      推荐文章