关于 HTML5 的文件上传处理,兼容性问题,以及 BLOB 对象的使用 (转载)
研究过程中关于本主体的相关参考
好文:https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
关于 FormData
FormData 是一个 HTML5 的原生对象,使用 FormData 可以将一个 Form 或者一系列的字段包装成一个对象,然后通过 jQuery 或者标准的 XHR 进行 Ajax 发送。
下面是一个简单的例子:
1. 直接封装整个 form:
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));
2. 逐个字段产生:
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"
// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);
var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
如果使用 jQuery,产生含有数据的 FormData 对象之后,我们可以将其传进 $.ajax
的 data 参数里面。
$.ajax({
url: 'http://example.com/api',
method: 'post',
processData: false
contentType: false,
data: formdata
});
这种情况,只需要将 formdata 对象传入,并且制定 processData 和 contentType 为 false,就可以用 multipart/form-data
的方式通过 ajax post 一个请求出去,当然这里面就可以包含一般的二进制对象(File 或者 Blob)
但是,实际测试中发现腾讯QQ浏览器在将 Blob 传入 Formdata 中的时候就会出问题,肯定是内核对 FormData 的实现上面有 Bug。
于是为了兼容这个问题,我试图自己封装一个模拟出来的表单,即由 boundary 分割的multipart/form-data
请求体。
请求体的封装
再重复一下,如果使用 multipart/form-data
的 Content-Type 去提交一个请求,实际上发出的 HTTP 请求是这样的:
请求头:
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryWwE7y8P3JK82rxsk
请求体:
------WebKitFormBoundaryWwE7y8P3JK82rxsk
Content-Disposition: form-data; name="username"
admin
------WebKitFormBoundaryWwE7y8P3JK82rxsk
Content-Disposition: form-data; name="avatar"; filename="avatar.png"
Content-Type: image/png
[binary stream]
------WebKitFormBoundaryWwE7y8P3JK82rxsk--
关键的格式就是这样,只要满足这个规范,后台就可以从(例如php) $_POST
和 $_FILE
获取提交的字段或者上传的文件。
因此,只要我们能够将这样的请求头和请求体按格式生成出来,就可以为所欲为了。
至于我们的调用方式,就是通过 $.ajax
的接口来给出。
其中,请求头很简单,首先随机一个 boundary 字符串,然后通过 ajax 的 contentType 参数输入即可:
var makeBoundary = function() {
return '----JQBoundary'+btoa(Math.random().toString()).substr(0,12);
};
var boundary = makeBoundary();
$.ajax({
contentType: 'multipart/form-data; boundary='+boundary,
// ...
});
如此即可在 ajax 请求中指定请求头。
难点在于请求体 ,请求体是在 $.ajax
方法的 data 部分给出的。
一般初学者来说,传进去的 data 是一个字典,还有我们刚刚上面提到的,给一个 FormData 对象也是可以的。
然后有一个关键点,processData 参数默认是 true,这时候 jQuery 在 ajax 之前会将我们传进去的字典串行化之后,放在 url 中(get 方式)或者放在 payload 请求体里面。
那么如果我们传进去 FormData 或者后面要讲的,传进去一个二进制流,就需要将这个 processData 设置为 false 了。
那么问题来了,我们如果要传进去一个二进制流,应该怎么整?
首先,我们并不知道,data 这个参数除了会吃字典和 FormData 还会吃些什么,我们先假设它会吃普通的 string。
所以我们试一下先不涉及二进制内容,将一个含有 unicode 内容的字符串传进去,看看能行不能行:
$.ajax(url, {
method: 'post',
processData: false,
contentType: 'multipart/form-data; boundary='+boundary,
data: '--' + boundary + '\r\n' +
'Content-Disposition: form-data; name="username"\r\n\r\n' +
'呆滞的慢板\r\n' +
'--' + boundary + '--\r\n'
});
上面这段是行得通的,因为是我从后台读取请求体之后一比一仿造出来的,肯定可以骗过后台。
只是我们要知道,前端还默默为我们做了一件事,就是将中文自动执行了编码,因为从前台看,’呆滞的慢板’在字符串中的长度是 5,但是在后台看,这五个字被编制成了 15 位的 utf 编码二进制串。
ok,一种方法行得通,那么如果涉及二进制内容呢(例如图片)。
获取和处理二进制流
首先,我们需要读取二进制流的内容。
对于二进制流,我们可以这样获取:
var file = document.getElementById('fileElement').files[0];
var reader = new FileReader();
reader.onload = function(e) {
var content = e.target.result;
console.log(content);
}
reader.readAsBinaryString();
这样得出来的 binaryString 格式,是一个字节流,与 atob (相当于base64decode) 一个 base64 串得到的输出是同样的格式。
同样,还有 readAsText,readAsDataUrl, readAsArrayBuffer 等方法,但是获取出来的e.target.result
是不一样的。
可以看到,如果这样,就可以异步获取文件的二进制内容,作为一个字符串,然后我们加上 boundary 拼接到其他字段的整体 formdata 中,然后就可以最终串接成一个完整的 payload 了。
然后我们将这样的 data ajax 出去,发现死翘翘了。
另一种可接受的 data 流格式:ArrayBuffer
失败的原因是,由于文本类型(而且还是 unicode 文本)类型与直接的二进制流放在一起,产生了编码混乱,ajax 发出之间,由于这是一个字符串,因此 xhr 对象帮我们自动编码这个字符串,结果造成了二进制流的破坏,后台识别不出来了。
换个说法,我们遍历这个字符串,碰到一些中文的 unicode 字符,他的取值是超出一个字节的,因此作为流编码,应该按照 utf8 方式,编码成三个字节才对。
那怎么办?只有我们自己来做了。
经过了无尽的折腾撞墙试错,直接写出宝贵的结论:
可以通过 unicode 和二进制混编构造的字符串,在传递给 ajax 之前,将其一个一个字节编码到 Uint8Array 中,再获取其 buffer,作为 data 传给 ajax。
下面一步一步来:
首先,我们要将中间所有涉及的 unicode 字符一个一个拆开:
关于这个问题,我在另一篇文章已经写得很详细了:
https://www.huangwenchao.com.cn/2015/09/javascript-utf8-encoding.html
于是我们可以得到一个确保每一个值都不会超过一个字节的字符串。
/**
* Encode a given string to utf8 encoded binary string.
* @param str:
* @returns string:
*/
var str2utf8 = window.TextEncoder ? function(str) {
var encoder = new TextEncoder('utf8');
var bytes = encoder.encode(str);
var result = '';
for(var i = 0; i < bytes.length; ++i) {
result += String.fromCharCode(bytes[i]);
}
return result;
} : function(str) {
return eval('\''+encodeURI(str).replace(/%/gm, '\\x')+'\'');
};
然后我们将其编码成 Uint8Array,过程省略,最终就是这个函数:
var str2Uint8Array = function(str) {
var arr = [], c;
for(var i = 0; i < str.length; ++i) {
c = str.charCodeAt(i);
if(c > 0xff) {
alert('Char code range out of 8 bit, parse error!');
return [];
}
arr.push(str.charCodeAt(i));
}
return new Uint8Array(arr);
};
那么最终我们可以这样来发送一个 ajax,就可以完全兼容二进制流和普通字段了:
var strctured_body = '...'; // 这是我们手工混编出来的,带有 unicode 字符的完整 request body
var encoded_body = str2utf8(structured_body);
var byte_array = str2Uint8Array(encoded_body);
$.ajax(url, {
method: 'post',
processData: false,
contentType: 'multipart/form-data; boundary='+boundary,
data: byte_array.buffer
});
试了无数种方法,最后只有这样能够将自己编制的内容完整 post 出去,使用 ArrayBuffer 的格式。
后记
最终,我还是耐不住寂寞,做了一个插件,自动做好这些封装,当然,中间还涉及到了接口的设计,如果再做此类工作,参考我的这个插件就可以了。
对象的使用