【发布时间】：2015-05-07 00:34:59
【问题描述】：
我正在用 php 制作一个网络应用程序，您可以在一个文件中提交图片并在另一个文件中显示它们。为了处理当人们将多个文件上传到同一个团队时，我想创建一个图片库，但我将图片以二进制形式保存在 txt 文件中，这样我在显示它们时就不必处理文件扩展名。我决定通过显示图像来使用 jQuery 和 AJAX，然后当您单击某些文本时，它会转到下一个文本。一切都在我使用 chrome 的计算机上完美运行，但是当我尝试在移动设备上执行此操作（特别是 chrome 和 ios 上的 safari）时，图片无法加载。有谁知道是什么原因造成的？这是我的代码：
<html>
<head>
<title>Yeti Robotics Scouting</title>
<meta name="viewport" content="width=device-width, intial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="scouting.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="scouting.js"></script>
</head>
<body>
<div class="header">
<nav>
<a href="/">Yeti Scouting</a> |
<a href="/results.php">Results</a> |
<a href="/pit.php">Pit Form</a>
<form class="search" action="team.php" method="get">
<input type="number" name="team" placeholder="Enter team number" />
<button type="submit">Go</button>
</form>
</nav>
<hr />
</div>
<script>
var picNum = 1;
var teamNumber = <?php echo json_encode($_GET['teamNumber']);?>;
var picLimit = <?php
for($i = 1; file_exists("pics/" . $_GET['teamNumber'] . "/" . $i . ".txt"); $i++){}
echo json_encode($i - 1);?>;
$(document).ready(function(){
$.get("get_picture.php?teamNumber=" + teamNumber + "&pic=1", function(data, status) {
$("#picture").attr("src", data);
});
refreshPicNum();
});
function previousPicture() {
if (picNum > 1) {
picNum--;
} else {
picNum = picLimit;
}
$(document).ready(function(){
$.get("get_picture.php?teamNumber=" + teamNumber + "&pic=" + picNum, function(data, status) {
$("#picture").attr("src", data);
});
});
refreshPicNum();
}
function nextPicture() {
$(document).ready(function() {
if (picNum < picLimit) {
picNum++;
} else {
picNum = 1;
}
$.get("get_picture.php?teamNumber=" + teamNumber + "&pic=" + picNum, function(data, status) {
$("#picture").attr("src", data);
});
});
refreshPicNum();
};
function refreshPicNum() {
document.getElementById("pic_num").innerHTML = picNum + "/" + picLimit;
}
</script>
<center><span id='pic_num'></span></center>
<span class='left_arrow' onclick="previousPicture()">
← Previous Picture
</span>
<span class='right_arrow'onclick="nextPicture()">
Next Picture →
</span>
<img id='picture' src='' alt='What? No picture?!?'>
</body>
</html>
编辑：因此无论出于何种原因，该页面似乎都可以在 safari 上运行，但它仍然在 chrome 中显示 img 的 alt。
【问题讨论】：
-
这些图片真的很大吗，还是有很多？图片是什么格式的？
-
@braks 这些照片是用手机摄像头拍摄的，我唯一可以测试的手机是 iPhone 6，它有一个 8 兆像素的摄像头和保存图片的 txt 文件的大小介于 1,545 KB 和 2,119 KB 之间。
标签： javascript php jquery html ajax