バイナリデータも含むmultipartをPOST送信

sendAsBinaryだとどうも日本語が含まれるとうまく送信できないみたい。


ソース：http://blog.footle.org/2007/07/31/binary-multipart-posts-in-javascript/



var dataURL = this.canvas.toDataURL(this.getImageType()); // grab the snapshot as base64
var imgData = atob(dataURL.substring(13 + this.getImageType().length)); // convert to binary

var filenameTimestamp = (new Date().getTime());
var separator = "----------12345-multipart-boundary-" + filenameTimestamp;

// Javascript munges binary data when it undergoes string operations (such as concatenation), so we need
// to jump through a bunch of hoops with streams to make sure that doesn't happen

// create a string input stream with the form preamble
var prefixStringInputStream = Components.classes["@mozilla.org/io/string-input-stream;1"].createInstance(Components.interfaces.nsIStringInputStream);
var formData =
"--" + separator + "\\r\\n" +
"Content-Disposition: form-data; name=\"data\"; filename=\"snapshot_" + filenameTimestamp +
(this.getImageType() === "image/jpeg" ? ".jpg" : ".png") + "\"\\r\\n" +
"Content-Type: " + this.getImageType() + "\\r\\n\\r\\n";
prefixStringInputStream.setData(formData, formData.length);

// write the image data via a binary output stream, to a storage stream
var binaryOutputStream = Components.classes["@mozilla.org/binaryoutputstream;1"].createInstance(Components.interfaces.nsIBinaryOutputStream);
var storageStream = Components.classes["@mozilla.org/storagestream;1"].createInstance(Components.interfaces.nsIStorageStream);
storageStream.init(4096, imgData.length, null);
binaryOutputStream.setOutputStream(storageStream.getOutputStream(0));
binaryOutputStream.writeBytes(imgData, imgData.length);
binaryOutputStream.close();

// write out the rest of the form to another string input stream
var suffixStringInputStream = Components.classes["@mozilla.org/io/string-input-stream;1"].createInstance(Components.interfaces.nsIStringInputStream);
formData =
"\\r\\n--" + separator + "\\r\\n" +
"Content-Disposition: form-data; name=\"description\"\\r\\n\\r\\n" + description + "\\r\\n" +
"--" + separator + "--\\r\\n";
suffixStringInputStream.setData(formData, formData.length);

// multiplex the streams together
var multiStream = Components.classes["@mozilla.org/io/multiplex-input-stream;1"].createInstance(Components.interfaces.nsIMultiplexInputStream);
multiStream.appendStream(prefixStringInputStream);
multiStream.appendStream(storageStream.newInputStream(0));
multiStream.appendStream(suffixStringInputStream);

// post it
req.open("POST", "http://yoursite.com/upload_endpoint", true);
req.setRequestHeader("Accept", "*/*, application/xml");
req.setRequestHeader("Content-type", "multipart/form-data; boundary=" + separator);
req.setRequestHeader("Content-length", multiStream.available());
req.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
req.setRequestHeader("User-Agent", "YourUserAgent/1.0.0");
req.send(multiStream);







Firefoxアドオンの為の、バイナリデータの表示など

バイナリデータからドキュメントに表示させる為のURIの作成
http://cheesy.dip.jp/diary/archives/101 ← 参考

var image_b64 = btoa(images[i]); // base64 encoding
image_b64.replace(/n/g, "");
var img = d.createElement('img');
img.src = 'data:image/jpeg;base64,' image_b64;
var div = d.createElement('div');
div.appendChild(img);

ちなみにcanvasには　toDataURL メソッドがあるのでこれをつかえばOK.
document.getElementById('canvas').toDataURL();



その逆で data:image/png;base64, ・・・・うんたら・・・ からバイナリへ変換

「data:image/png;base64,」 この部分をまずは削除して残りの部分をatob。

atob(imagesDataURI);
https://developer.mozilla.org/en/DOM/window.atob

base64 encodeを改行する

var c = btoa(binary); // btoa base64 encode
var b = "";
var i = 0;
var bdata = "";

while(b = c.substr(i,76)){

if(b){
bdata = bdata + b + "\n";

}
i += 76;
}