我使用以下代码将从画布导出的文件上传到服务器。它适用于Chrome for Android,但使用带有webkit版本534.30的原生Android浏览器上传失败。
var canvas; // a canvas with an image jpg or png
var dataUrl = canvas.toDataURL();
var file = dataURLtoBlob(dataUrl); //source: https://github.com/blueimp/JavaScript-Canvas-to-Blob
var formdata = new FormData();
formdata.append("image", file);
var xhrNativeObject = new XMLHttpRequest();
// Upload progress listener
xhrNativeObject.upload.addEventListener("progress", function (event) {
if (event.lengthComputable) {
var position = event.loaded || event.position;
var total = event.total;
var xhrPercentComplete = (position / total * 100 | 0);
console.log(xhrPercentComplete, position, total);
}
}, false);
xhrNativeObject.open("post", url, true);
xhrNativeObject.onload = function (event) {
var targetResponse = event.currentTarget;
if ((targetResponse.readyState == 4) && (targetResponse.status == 200)) {
var obj = JSON.parse(targetResponse.responseText);
console.log(obj);
} else {
console.log("error");
}
}
// send the file
xhrNativeObject.send(formdata);
文件到达服务器时一直是空的。
如何上传从Android原生浏览器上的Canvas导出的文件?