Comment télécharger des fichiers blob à l'aide de l'ajax de jQuery-js tutoriel-php.cn

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

不言

Libérer： 2018-07-02 17:08:59

original

4897 Les gens l'ont consulté

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>

Copier après la connexion

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!