Comment récupérer des images sous forme de blobs avec la méthode ajax de jQuery ?-js tutoriel-php.cn

Comment récupérer des images sous forme de blobs avec la méthode ajax de jQuery ?

Barbara Streisand

Libérer： 2024-11-11 08:53:02

original

806 Les gens l'ont consulté

How to Retrieve Images as Blobs with jQuery's ajax Method?

Récupération d'images sous forme de blobs avec la méthode ajax de jQuery

Défi

La récupération d'images sous forme de blobs n'est pas prise en charge nativement par l'ajax de jQuery méthode, entraînant des incompatibilités de types de données et des images corrompues lors du téléchargement.

Solution : XMLHttpRequest natif

Pour récupérer une image en tant que blob, utilisez XMLHttpRequest natif :

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 &amp;&amp; xhr.status == 200) {
        // this.response contains the blob
        handler(this.response);
    }
};
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send();

Copier après la connexion

Support jQuery 3.0

De nos jours, il est possible de récupérer des blobs avec jQuery 3.0 :

jQuery.ajax({
    url: 'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
    cache: false,
    xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob';
        return xhr;
    },
    success: function(data) {
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(data);
    },
    error: function() {
        // Handle error
    }
});

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!