Maison >interface Web >js tutoriel >Comment télécharger des fichiers blob à l'aide de l'ajax de jQuery

Comment télécharger des fichiers blob à l'aide de l'ajax de jQuery

不言original: 2018-07-02 17:08:595007parcourir

Cet article présente principalement les informations pertinentes sur le téléchargement de fichiers blob ajax de jQuery. Il est très bon et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer

Cela semble un peu déroutant à première vue. utilisé ng et React auparavant, j'ai également écrit une fonction similaire lorsque je travaillais dessus, mais cela s'est très bien passé (j'ai donc oublié les détails spécifiques). Pourquoi jquery ne fonctionne-t-il pas ? Après avoir examiné le scénario spécifique, j'ai découvert que le rappel ajax de jq avait analysé les données de réponse au format chaîne de manière infaillible.

J'ai vérifié gg et découvert que la solution nationale n'est pas d'utiliser jq dans ce scénario, mais de créer manuellement XMLHttpRequest vous-même. Bien que cette méthode soit très fiable, le jq ajax précédemment encapsulé ne peut pas être utilisé.

J'ai vérifié la documentation de jq et j'avais prévu d'étendre le type de données moi-même en fonction de l'interface jQuery.ajaxSetup() fournie par jq, mais je n'arrivais pas à le comprendre. Plus tard, j'ai trouvé un plug-in jq packagé par Daniel sur github.

Alors on peut écrire comme ceci :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blob demo</title>
</head>
<body>
<img id="img" src="" />
<script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js" charset="utf-8"></script>
<script src="jquery-ajax-blob-arraybuffer.js"></script>
<script type="text/javascript">
$.ajax({
url: "./face.jpg",
type: "get",
dataType: "blob", //扩展出了blob类型
}).done(function(data, status, jqXHR){
var reader = new window.FileReader();
reader.readAsDataURL(data);
reader.onloadend = function() {
document.getElementById("img").src=reader.result;
}
}).fail(function(jqXHR, textStatus) {
console.warn(textStatus);
});
</script>
</body>
</html>

Cependant, à en juger par le code source du plug-in, c'est aussi construit manuellement Un objet XMLHttpRequest pour envoyer du ajax, mais la compatibilité peut être un problème. Si vous souhaitez en savoir plus, vous pouvez lire ici.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

JS natif écrivant la fonction de fonction de requête Ajax

Introduction à l'utilisation du téléchargement de fichiers asynchrone ajaxFileUpload

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Introduction aux méthodes get et post basées sur js native et ajax ainsi qu'à la méthode d'écriture native de jsonpArticle suivant：Introduction aux méthodes get et post basées sur js native et ajax ainsi qu'à la méthode d'écriture native de jsonp

Articles Liés

Voir plus