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事件没有作用,第二次选择不同的文件才会显示
有谁遇到过么,该怎么解决啊?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
是ajaxfileupload调用顺序问题,把
file1.ajaxfileupload
放在click
外面先调用就可以了。。。。推测
在MQQBrowser下,当
input
被点击的时候,也就是上面代码执行到:$('#btn').click(function(e){
先执行的
file1.get(0).click();
然后调用
webview
的弹出选择文件,下面的阻塞掉了选择完文件再执行下面的方法,但是此时input的值已经改变,所以没有触发插件中的
change
事件,导致第一次选择不能触发上传