我想构建一个简单的 HTML 页面,其中包含 JavaScript 来执行表单 POST,其中包含嵌入在 HTML 中的图像数据与磁盘上的文件。
我看过这篇可以使用常规表单数据的帖子,但我对图像数据感到困惑。
我想构建一个简单的 HTML 页面,其中包含 JavaScript 来执行表单 POST,其中包含嵌入在 HTML 中的图像数据与磁盘上的文件。
我看过这篇可以使用常规表单数据的帖子,但我对图像数据感到困惑。
可作为 jQuery 插件使用的新版本和改进版本: https ://github.com/CoeJoder/jquery.image.blob
$('img').imageBlob().ajax('/upload', {
complete: function(jqXHR, textStatus) { console.log(textStatus); }
});
因此,浏览器要求是:
注意:图像必须与您的 JavaScript同源,否则浏览器安全策略将阻止调用canvas.toDataURL()
(有关更多详细信息,请参阅此 SO 问题:为什么 canvas.toDataURL() 会引发安全异常?)。如该帖子的答案中所述,可以使用代理服务器通过响应标头注入来规避此限制。
这是下面代码的jsfiddle。它应该抛出错误消息,因为它没有提交到真实的 URL ('/some/url')。使用 firebug 或类似工具检查请求数据并验证图像是否序列化为表单数据(页面加载后单击“运行”):
<img id="someImage" src="../img/logo.png"/>
(function() {
// access the raw image data
var img = document.getElementById('someImage');
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var dataUrl = canvas.toDataURL('image/png');
var blob = dataUriToBlob(dataUrl);
// submit as a multipart form, along with any other data
var form = new FormData();
var xhr = new XMLHttpRequest();
xhr.open('POST', '/some/url', true); // plug-in desired URL
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert('Success: ' + xhr.responseText);
} else {
alert('Error submitting image: ' + xhr.status);
}
}
};
form.append('param1', 'value1');
form.append('param2', 'value2');
form.append('theFile', blob);
xhr.send(form);
function dataUriToBlob(dataURI) {
// serialize the base64/URLEncoded data
var byteString;
if (dataURI.split(',')[0].indexOf('base64') >= 0) {
byteString = atob(dataURI.split(',')[1]);
}
else {
byteString = unescape(dataURI.split(',')[1]);
}
// parse the mime type
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
// construct a Blob of the image data
var array = [];
for(var i = 0; i < byteString.length; i++) {
array.push(byteString.charCodeAt(i));
}
return new Blob(
[new Uint8Array(array)],
{type: mimeString}
);
}
})();
假设您正在谈论嵌入式图像数据,例如http://en.wikipedia.org/wiki/Data_URI_scheme#HTML
****如果我的假设不正确,请忽略此答案。**
您可以使用 XMLHttpRequest 将其作为 JSON 发送。这是示例代码:(您可能希望在发送前删除标题部分('data:image/png;base64,'))
图片
<img id="myimg" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">
按钮
<input id="subbtn" type="button" value="sub" onclick="sendImg()"></input>
脚本
function sendImg() {
var dt = document.getElementById("myimg").src;
var xhr = new XMLHttpRequest();
xhr.open("POST", '/Home/Index', true); //put your URL instead of '/Home/Index'
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) { //4 means request finished and response is ready
alert(xhr.responseText);
}
};
var contentType = "application/json";
xhr.setRequestHeader("Content-Type", contentType);
for (var header in this.headers) {
xhr.setRequestHeader(header, headers[header]);
}
// here's our data variable that we talked about earlier
var data = JSON.stringify({ src: dt });
// finally send the request as binary data
xhr.send(data);
}
编辑
正如@JoeCoder 建议的那样,您也可以使用 FormData 对象并以二进制格式发送,而不是 json。查看他的答案以获取更多详细信息。