最佳答案
尝试使用 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 上。服务器和客户端在同一台机器上。同样的事情也发生在我尝试上传的任何文件上,我只是选择了 PNG,因为它是最明显的例子。