Maison >interface Web >js tutoriel >Comment récupérer des images sous forme de blobs à l'aide de jQuery et JavaScript ?
Dans une question précédente, vous avez tenté de soumettre des données d'image dans une requête POST. Votre approche actuelle consiste à utiliser jQuery.ajax pour récupérer l'image, mais vous rencontrez des images corrompues en raison de non-concordances de types de données.
Types de données jQuery limités
jQuery.ajax prend en charge plusieurs types de données mais n'inclut pas explicitement les images. Par conséquent, accéder à une image en tant que blob en utilisant jQuery seul n'est pas réalisable.
Solution XMLHttpRequest native
Pour résoudre ce problème, vous pouvez utiliser XMLHttpRequest natif. Voici un exemple :
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var img = document.getElementById('img'); var url = window.URL || window.webkitURL; img.src = url.createObjectURL(this.response); } } xhr.open('GET', 'http://jsfiddle.net/img/logo.png'); xhr.responseType = 'blob'; xhr.send();
Ce script créera un objet XMLHttpRequest, le configurera pour recevoir une réponse blob et utilisera la propriété URL Blob pour afficher l'image dans un élément HTML.
Solution jQuery 3
Dans jQuery 3, une nouvelle approche est disponible :
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(){// Seems like the only way to get access to the xhr object 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(){ } });
Dans cet exemple, la fonction xhr est utilisée pour configurer l'objet XMLHttpRequest, et le type de réponse est explicitement défini sur « blob ». Cela permet à jQuery de récupérer l'image sous forme de blob et de l'afficher dans l'élément image.
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!