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事件没有作用,第二次选择不同的文件才会显示
有谁遇到过么,该怎么解决啊?
白い指轮だ
10 years, 1 month ago
Answers
是ajaxfileupload调用顺序问题,把
file1.ajaxfileupload
放在
click
外面先调用就可以了。。。。
推测
在MQQBrowser下,当
input
被点击的时候,也就是上面代码执行到:
$('#btn').click(function(e){
先执行的
file1.get(0).click();
然后调用
webview
的弹出选择文件,下面的阻塞掉了
选择完文件再执行下面的方法,但是此时input的值已经改变,所以没有触发插件中的
change
事件,导致第一次选择不能触发上传
不就是个玩儿
answered 10 years, 1 month ago