好的。我有一个正在构建的图库应用程序,其中有一个缩略图列表,单击后,通过对showfile.php的ajax调用获取原始图像,showfile.php只是使用X-Sendfile通过header((返回文件。这是可行的,但由于某种原因,我无法获得返回正确值的后续调用,因此脚本中断。(第一个返回返回"null",这正是我想要的,而第二个返回图像作为二进制数据(。
好的。以下是ajax调用的代码:
$('.lightbox').click(function(e) {
e.preventDefault();
var $this = $(this);
var linkName = $(this).attr('href').split('=')[1];
$.ajax({
url: 'showfile.php',
type: 'GET',
dataType: 'binary',
data: 'file='+linkName+'',
responseType: 'blob',
processData: false,
success: function(result) {
var image = new Image();
image.src = URL.createObjectURL(result);
$('#lightbox_container').append(image).removeClass('hidden').addClass('visible');
image.onload = function() { var imageWidth = image.width/2; $('#lightbox_container').css({'margin-left':'-'+imageWidth+'px'}); window.URL.revokeObjectURL(image.src);};
$('#overlay').removeClass('hidden').addClass('visible');
$('.nextbutton,.prevbutton').click(function(e) {
if ($(e.target).hasClass('prevbutton')) {
var linkName = $this.parent('.pictures').prev('li.pictures').find('a').attr('href').split('=')[1];
$.ajax({
url: 'showfile.php',
type: 'GET',
datatype: 'binary',
data: 'file='+linkName+'',
responseType: 'blob',
processData: false,
success: function(result2) {
var image = new Image();
var binaryData = [];
binaryData.push(result2);
image.src = URL.createObjectURL(new Blob(binaryData));
// image.src = URL.createObjectURL(result2);
$('#lightbox_container img').remove();
$('#lightbox_container').append(image);
image.onload = function() { var imageWidth = image.width/2; $('#lightbox_container').css({'margin-left':'-'+imageWidth+'px'}); };
}
})
}
})
}
});
});
这一直有效,直到第二次ajax调用——第二次调用时showfile.php的返回值是一个二进制块(如果我在控制台中查看NET选项卡,我会得到正确的返回图像(,但由于某种原因,createObjectUrl不起作用(我尝试过不使用binaryData位,但随后createObjectUrls自然会失败,因为结果不适合使用。
showfile.php如下所示:
<?php
require_once('conf/config.php');
if (!session_id()) { session_start(); };
if ($isloggedin) {
if (isset($_GET['file'])) {
// $getFile = readfile($_SERVER['DOCUMENT_ROOT'].'/'.$userpath.$username.'pictures/'.$_GET['file']);
header('Content-type: image/jpeg');
header('X-Sendfile: '.$_SERVER['DOCUMENT_ROOT'].'/'.$userpath.$username.'pictures/'.$_GET['file'].''); # make sure $file is the full path, not relative
exit;
// echo base64_encode($getFile);
}
}
?>
有一些评论行,我试着用readfile((代替,效果并没有更好,只是总体上看起来有点慢。
所以,我想要的是:我做错了什么?由于ajax调用在第一次单击时起作用,所以在第二次单击时也应该起作用,对吧?但事实并非如此。但是,如果我关闭图像,然后单击一个新的缩略图,它会很好地工作。不刷新页面或类似的东西,只需关闭弹出窗口,然后单击一个新的缩略图,它就会再次工作。但由于某些原因,它在第二次单击时不会返回相同的"null"值。
这让我相信,有一些东西没有被关闭或重置或其他什么,还有某种"遗留"问题——这让我想到了php文件,因为它似乎返回了不同的值。我能做些什么来"清零"吗?
我试过在谷歌上搜索,但根本没有找到太多关于这些功能的信息。
哦,正如我所说,第二次ajax点击返回了一些二进制信息,但当我试图使用blob从中创建一个objectUrl时,它不起作用,也就是说,这个url不起作用了,它只是显示了一个损坏的图像图标,而不是实际的图像,尽管这个url看起来是正确的(就像我重新访问缩略图并再次点击一样,从头开始(,正如我说的,控制台中的net选项卡显示在这两种情况下返回的图像。
好吧,我现在觉得非常愚蠢。这是个打字错误。datatype
应该是dataType
——有时javascript中的camel大小写会让我绊倒。改变这一点可以解决问题。