Как преобразовать данные?

Question

[yury_borisov]

Есть код (laravel )

$file = Storage::get('file');
return response($file, 200)
->header('Content-Type', 'image/jpg')
->header('Content-Length', strlen($file));

Хочу через ajax получить эту картинку и вставить в img или в div

$.ajax({
            url: url,
            type: "GET",
            cache: true,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                // Устанавливаем обработчик подгрузки
                xhr.addEventListener('progress', function(evt){
                    if (evt.lengthComputable) {
                        var percentComplete = Math.ceil(evt.loaded / evt.total * 100);
                        console.log(percentComplete);
                    }
                }, false);
                return xhr;
            },
            success: function(data){ 
                $('.container').html('<img src="data:image/jpeg;base64,'+data+'">');
            }

Мне приходят символы (откройте любую картинку в текстовом редакторе и вы увидите тоже самое)
так вот вопрос, как все это добро закинуть в div ? преобразовать в base64 не получилось, точнее получилось, но результата нет :)
хочу сделать загрузку изображения в браузер, что бы видно было сколько загрузилось :)

Answer 1

[Евгений]

Вы не поверите...
<img src="path/to/image">

Comments

[Lander]

Не... как я понял - он непосредственно хочет код картинки в html зашить...

Answer 2

[Константин Громов]

Эта задача требует работы с бинарными данными, которые ajax-обёртка jquery из коробки не поддерживает. Потому проще использовать нативный интерфейс:

function fetchBlob(url, callbacks) {
    var xhr = new XMLHttpRequest();

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    if (callbacks) {
        for (var key in callbacks) {
            if (key.indexOf('on') === 0) {
                xhr[key] = callbacks[key];
            }
        }
    }

    xhr.send();
}

fetchBlob('/path/to/image.jpg', {
    onprogress: function (event) {
        console.log(Math.round(event.loaded / event.total * 100) + '%');
    },
    onload: function () {
        $('.container').html('<img src="' + URL.createObjectURL(this.response) + '">');
    }
});

Чтобы работал ваш вариант с base64, нужно отдавать изображение с сервера именно в этом формате.