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

有谁遇到过么，该怎么解决啊？

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

推测

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

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

【热门文章】