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

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

qq浏览器 微信浏览器 文件上传

白い指轮だ 10 years, 1 month ago

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

推测

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

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

不就是个玩儿 answered 10 years, 1 month ago

Your Answer