jQuery AJAX + двоичный/blob – вернуть и показать изображения/другие файлы

Хорошо, я работаю над созданием приложения-галереи, не основанного на базе данных, и при этом обдумывал способ загрузки полной версии изображений (и других файлов), не раскрывая фактическую ссылку на изображение. Хотя я могу сделать это с помощью PHP:

 


<?php


require_once('conf/config.php');


if (!session_id()) { session_start(); };


if ($isloggedin) {


if (isset($_GET['filename'])) {


// $getFile = readfile($_SERVER['DOCUMENT_ROOT'].'/'.$userpath.$username.'pictures/'.$_GET['filename']);


header("X-Sendfile: ".$_SERVER['DOCUMENT_ROOT']."/users/admin/pictures/".$_GET['file']."");


exit();


}


echo $getFile;


}


?>

PHP: изображение отображается отдельно, на «пустой» странице — это нормально, но не то, что мне нужно.

Итак, я думал о том, чтобы вернуть информацию (отсюда и закомментированный readfile() в приведенном выше коде) и отобразить ее в div типа «лайтбокс» на странице.

Однако у меня возникли проблемы с возвратом данных и их отображением.

Поэтому я надеялся, что у кого-то есть опыт использования jQuery или обычного JavaScript для извлечения и отображения данных и их отображения на самом сайте, используя ajax (или аналогичный) для получения данных.

Хорошо, кажется, я снова решаю свою проблему: Текущий код jQuery:

 


<?php


require_once('conf/config.php');


if (!session_id()) { session_start(); };


if ($isloggedin) {


if (isset($_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


}


}


?>

Код (разметка): Код файла showfile.php выглядит следующим образом:

  $.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'}) }; $('#overlay').removeClass('hidden').addClass('visible'); } }); 

PHP: Кажется, это работает нормально для изображений, теперь мне просто нужно исправить это для других типов файлов.

Нет.



Весь смысл в том, чтобы отправить имя изображения (что-то вроде: /showfile?=picture.jpg) на серверную часть, а затем вернуть необработанные данные изображения, проанализировать эти данные и отобразить их. Следовательно, никому не следует показывать необработанный URL-адрес изображения (который будет анализироваться только в бэкэнд-бите).

Итак, сейчас я пробовал что-то вроде этого:

 


$('.lightbox').click(function(e) {


e.preventDefault();


var linkName = $(this).attr('href').split('=')[1];


var xhr = new XMLHttpRequest();


xhr.onreadystatechange = function(){


if (this.readyState == 4 && this.status == 200){


//this.response is what you're looking for


// handler(this.response);


console.log(this.response, typeof this.response);


var img = document.getElementById('lightbox_image');


var url = window.URL || window.webkitURL;


img.src = url.createObjectURL(this.response);


console.log(img.src);


}


}


xhr.open('GET', '[URL='https://lumtu.com/yti/cQZZQcy9odHRwOi8vdXBsb2Fkci5sb2MvdXNlcnMvYWRtaW4vcGljdHVyHdj']http://uploadr.loc/users/admin/pictures/'+linkName+[/URL]'');


xhr.responseType = 'blob';


xhr.send();


})

Код (разметка): Кажется, что-то возвращает, но не то, что мне нужно - я получаю что-то, похожее на каплю, но в возвращаемых значениях, похоже, нет никакой реальной информации.

Так что я немного застрял.

Приведенные вами примеры отправляют URL-адрес изображения в javascript, что противоречит всей цели.

Может быть, это совершенно неправильно, но ты ведь это? как бы находясь в поиске?
https://davidwalsh.name/convert-image-data-uri-javascript

https://www.npmjs.com/package/gulp-image-data-uri

https://github.com/ahomu/grunt-data-uri