fileReader.readAsBinaryString を使用して AJAX 経由でサーバーに PNG ファイルをアップロードしようとすると、コードが削除されます (fileObject はファイルに関する情報を含むオブジェクトです)。
var fileReader = new FileReader();
fileReader.onload = function(e) {
var xmlHttpRequest = new XMLHttpRequest();
//Some AJAX-y stuff - callbacks, handlers etc.
xmlHttpRequest.open("POST", '/pushfile', true);
var dashes = '--';
var boundary = 'aperturephotoupload';
var crlf = "\r\n";
//Post with the correct MIME type (If the OS can identify one)
if ( fileObject.type == '' ){
filetype = 'application/octet-stream';
} else {
filetype = fileObject.type;
}
//Build a HTTP request to post the file
var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(fileObject.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + e.target.result + crlf + dashes + boundary + dashes;
xmlHttpRequest.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary);
//Send the binary data
xmlHttpRequest.send(data);
}
fileReader.readAsBinaryString(fileObject);
アップロードする前に (VI を使用して) ファイルの最初の数行を調べると、
アップロード後の同じファイルが表示されます
どこかのフォーマット/エンコーディングの問題のようです。生のバイナリデータで単純なUTF8エンコード関数を使用してみました
function utf8encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
)
次に、元のコードで
//Build a HTTP request to post the file
var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(file.file.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + utf8encode(e.target.result) + crlf + dashes + boundary + dashes;
の出力が得られます
生のファイルが何であったかはまだわかりません =(
エンコードの問題を回避するためにファイルをエンコード/ロード/処理するにはどうすればよいですか。HTTP リクエストで受信されるファイルは、アップロード前のファイルと同じになります。
fileReader.readAsBinaryString() を使用する代わりに fileObject.getAsBinary() を使用してバイナリ データを取得すると、その他の有用な情報が得られます。ただし、getAsBinary は Firefox でのみ機能します。私はこれを Firefox と Chrome でテストしてきましたが、両方とも Mac で同じ結果が得られました。バックエンドのアップロードは、再び Mac で実行されるNGINX Upload Moduleによって処理されます。サーバーとクライアントは同じマシン上にあります。アップロードしようとするファイルでも同じことが起こります。最も明白な例だったので、PNG を選択しました。