javascript - 手机浏览器jquery报错
问题描述
已经解决 我使用了let，作为EC6新特性，移动端兼容较差。更换为var解决。
2017年8月22日 09:47 更新：
1.有朋友指出<script></script>没写在<body></body>中，一开始我是写在里边的，做了各种尝试没有解决，emmmm，破罐子破摔给放外边了，现在放回里边还是这样
2.用$(function(){});or$(document).ready(function(){});加载还是这样。
3.和ajax没关系，我加载jQuery的情况下<script>alert(1);</script>也依然不会弹出个1。
目前已经做过测试如下：
机型--------------firefox----------Chrome---------QQ浏览器-------------自带浏览器-----微信
华为荣耀9---------1-------------------0--------------0-----------------------------0-------------1
小米Mi 6-----------x-------------------1--------------0-----------------------------1-------------1
iPone 7 Plus------x-------------------1--------------1-----------------------------1-------------1
以上:x => 未测试，1 => 正常，0 => 不正常。
---------------------------------------原问题------------------------------------------------
1.最近写了一个upload小页面，没想到PC端完美运行，控制台无任何warning and notice的情况下，用手机浏览器打开js代码无效。
2.一开始认为是手机的锅，下载了一个QQ浏览器，依然无效，在微信浏览器中倒是很正常。加载jQuery的情况下，连一句alert(1);都无任何反应。
3.代码如下
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>文件上传</title>
<script src="/jquery.min.js"></script>
<style type="text/css" media="screen">
@media all and (orientation : landscape) {
.file,#btn,.fileerrorTip,.showFileName{
width: 30vw;
margin: 10vh auto;
outline: none;
}
}
@media all and (orientation : portrait){
.file,#btn,.fileerrorTip,.showFileName{
outline: none;
width: 80vw;
margin: 3vh auto;
}
}
.file {
position: relative;
display: block;
cursor: pointer;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
text-align: center;
line-height: 20px;
}
#btn{
display: block;
cursor: pointer;
padding: 4px 12px;
line-height: 20px;
text-indent: 0;
text-align: center;
border: 1px solid #99D3F5;
border-radius: 4px;
background: #D0EEFF;
color: #1E88C7;
}
.file input {
position: absolute;
cursor: pointer;
/*font-size: 100px;*/
right: 0;
top: 0;
opacity: 0;
}
.fileerrorTip,.showFileName{
display: none;
/*position: relative;*/
/*display: block;*/
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file,#btn,.fileerrorTip,.showFileName:hover {
cursor: pointer;
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body>
<form method="post" enctype="multipart/form-data" name="myForm">
<input type="hidden" name="MAX_FILE_SIZE" value="300000000" />
<a href="javascript:;" class="file">
选择文件
<input type="file" name="file" value=""/>
</a>
<div class="fileerrorTip">
</div>
<div class="showFileName"></div>
<div id="btn" >点击上传</div>
</form>
<script>
$(document).ready(function(){
alert(1);
$("#btn").hide();
$('#btn').click(function () {
var file = document.myForm.file.files[0];
var fm = new FormData();
fm.append('file', file);
$.ajax(
{
url: 'upload.php',
type: 'POST',
data: fm,
contentType: false, //禁止设置请求类型
processData: false, //禁止jquery对DAta数据的处理,默认会处理
//禁止的原因是,FormData已经帮我们做了处理
success: function (result) {
result?alert("上传成功"):alert("失败");
window.location.reload();
}
}
);
});
$("input[name='file']").change(function(){
let filePath=$(this).val();
let k = filePath.substr(filePath.indexOf(".")).replace(/\W/g,"");
$.ajax({
url: 'upload.php',
type: 'GET',
data: {type:k},
success: function (result) {
if(result)
{
$("#btn").show();
let arr=filePath.split('\\');
let fileName=arr[arr.length-1];
$(".showFileName").html("文件名："+fileName);
$(".showFileName").show();
}else{
$(".showFileName").hide();
$(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
}
}
});
});
});
</script>
</body>
</html>4.
改一下
$(document).ready(function(){
//jquery 执行方法操作
});
or:
$(function(){
//jquery 执行方法操作
})看看你引入jquery上面的那个js，删掉试试
这篇关于javascript - 手机浏览器jquery报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
