Comment puis-je charger des données d'image binaire à l'aide de Javascript et XMLHttpRequest?

Voici comment je l'ai fait.

Cette technique est fourni dans une réponse à l'autre question, mais il est également pertinent ici.

Je ne voulais pas en base64 encode quoi que ce soit. Je voulais télécharger et d'analyser des fichiers binaires dans le navigateur à l'aide de Javascript, sans modifier le serveur pour les encoder spécialement. J'ai trouvé que dans Firefox, par le fait de contraindre le type mime de la réponse via overrideMimeType(), je pourrais utiliser XMLHttpRequest.responseText. Sur IE, c'est différent parce que:

• responseText sur IE tronque le premier zéro. Pour les flux binaires c'est un gros problème.

• il n'y a pas de XMLHttpRequest.overrideMimeType(), à force c'est à dire de traiter les flux binaires sous forme de texte.

• bien qu'il y est un XMLHttpRequest.responseBody (c'est à dire uniquement!) qui est spécifiquement conçu pour être utilisé avec des données binaires ruisseaux, maddeningly que la propriété n'est pas utilisable à partir de Javascript.

Par conséquent, il est nécessaire de convertir IE responseBody de propriété sur une chose qui ressemble à responseText à partir de FireFox, avec le mime-type de contrainte. Ceci est possible en utilisant injecté VBScript.

Pour en faire de la cross-browser, vous avez besoin pour emballer juste le navigateur spécifique de la logique conditionnelle. C'est ce que j'ai utilisé:

//one-time code
if(/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) {
var IEBinaryToArray_ByteStr_Script =
"<!-- IEBinaryToArray_ByteStr -->\r\n"+
"<script type='text/vbscript'>\r\n"+
"Function IEBinaryToArray_ByteStr(Binary)\r\n"+
"   IEBinaryToArray_ByteStr = CStr(Binary)\r\n"+
"End Function\r\n"+
"Function IEBinaryToArray_ByteStr_Last(Binary)\r\n"+
"   Dim lastIndex\r\n"+
"   lastIndex = LenB(Binary)\r\n"+
"   if lastIndex mod 2 Then\r\n"+
"       IEBinaryToArray_ByteStr_Last = Chr( AscB( MidB( Binary, lastIndex, 1 ) ) )\r\n"+
"   Else\r\n"+
"       IEBinaryToArray_ByteStr_Last = "+'""'+"\r\n"+
"   End If\r\n"+
"End Function\r\n"+
"</script>\r\n";
//inject VBScript
document.write(IEBinaryToArray_ByteStr_Script);
}
//each time you make a request for a binary resource:
var req = (function() {
if (window.XMLHttpRequest) {
return new window.XMLHttpRequest();
}
else {
try {
return new ActiveXObject("MSXML2.XMLHTTP");
}
catch(ex) {
return null;
}
}
})();
var fileContents = "";
var filesize = -1;
var readByteAt = function(i){
return fileContents.charCodeAt(i) & 0xff;
};
req.open("GET", url, true);
if(/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) {
//IE-specific logic here
//helper to convert from responseBody to a "responseText" like thing
var convertResponseBodyToText = function (binary) {
var byteMapping = {};
for ( var i = 0; i < 256; i++ ) {
for ( var j = 0; j < 256; j++ ) {
byteMapping[ String.fromCharCode( i + j * 256 ) ] =
String.fromCharCode(i) + String.fromCharCode(j);
}
}
var rawBytes = IEBinaryToArray_ByteStr(binary);
var lastChr = IEBinaryToArray_ByteStr_Last(binary);
return rawBytes.replace(/[\s\S]/g,
function( match ) { return byteMapping[match]; }) + lastChr;
};
req.setRequestHeader("Accept-Charset", "x-user-defined");
req.onreadystatechange = function(event){
if (req.readyState == 4) {
if (req.status == 200) {
fileContents = convertResponseBodyToText(req.responseBody);
fileSize = fileContents.length-1;
//invoke a callback here, if you like...
}
else{
alert("download failed, status " + req.status);
}
}
};
req.send();
} else {
//ff/Gecko/Webkit specific stuff here
req.onreadystatechange = function(aEvt) {
if (req.readyState == 4) { //completed
if(req.status == 200){ //status == OK
fileContents = binStream.req.responseText;
filesize = fileContents.length;
//invoke a callback here, if you like...
}
else {
alert("download failed, status " + req.status);
}
}
};
//coerce response type
req.overrideMimeType('text/plain; charset=x-user-defined');
req.send(null);
}

...alors appel readByte(i) pour obtenir de l'octet à l' ith position dans le fichier binaire.

Bonne chance.

Crédit à Miskun pour le VBScript logique de conversion.

Vous pourriez avoir le serveur de retour en base64 texte, plutôt que de faire que le chiffrement côté client.

Par exemple, (dans ASP.NET) une demande d' /ImageAsBase64.ashx?fichier=/images/myimage.png peut être codé pour lire le fichier, base64encode il, et de les lire comme une réponse.

Il va vraiment être à peu près la même chose en PHP ou quoi que ce soit.