使用JavaScript的HTTP POST可下载数据链接
我有一个HTTP POST REST端点，它使用图像并返回一个HTML文档，其中包含图像中的像素数据。HTTP响应包括标题内容配置：附件；filename=Pixels.html，以便浏览器提示下载 我想要一个HTML/JavaScript（不是jQuery）应用程序使用JavaScript的HTTP POST可下载数据链接,javascript,html,http-post,content-disposition,Javascript,Html,Http Post,Content Disposition,我有一个HTTP POST REST端点，它使用图像并返回一个HTML文档，其中包含图像中的像素数据。HTTP响应包括标题内容配置：附件；filename=Pixels.html，以便浏览器提示下载 我想要一个HTML/JavaScript（不是jQuery）应用程序 允许我浏览和选择图像（例如， 单击链接后，将图像数据发布到端点，并让我将HTML内容下载到磁盘（例如，Get Pixels） 如何执行此操作？我尝试了以下代码： function getPixels() { var
Get Pixels
function getPixels() {
var input = document.getElementById("fid");
if (input.files && input.files[0]) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var imgData = e.target.result;
var postUrl = "./GetPixelsService.svc/image";
var xhr = new XMLHttpRequest();
xhr.open("POST", postUrl);
xhr.setRequestHeader("Content-Type", "image/png");
//xhr.onreadystatechange = function () {
// if (xhr.readyState === 4) {
// var res_display = document.getElementById("results");
// res_display.srcdoc = xhr.responseText;
// }
//}
xhr.send(imgData);
};
reader.readAsArrayBuffer(input.files[0]);
}
}
}
<p>
Upload the image here:
</p>
<input id="fid" name="fid" type="file" />
<!--<button type="submit" onclick="javascript: getPixels()">Get Pixels</button>-->
<p onclick="javascript: getPixels()">Get Pixels</p>
<p />
<hr />
<p>
<img id="img2check" src="" alt="" />
</p>
<p />
<iframe id="results" style="width: 100%; border: 0; height: 400px;" src="javascript:;">
Your browser does not support iframes.
</iframe>
在此处上载图像：
获取像素
您的浏览器不支持iFrame。
提前感谢。您不能强制客户端浏览器使用XMLHttpRequest提示保存对话框 您可以做以下几点： 1:请检查我对另一个类似问题的回答： 2:在服务器上生成文件或创建
getdownload4:还有另一种使用
Blobhtmlgetdownload4:还有另一种使用
Blobhtml <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function getPixels() {
showImage();
var input = document.getElementById("fid");
if (input.files && input.files[0]) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var imgData = e.target.result;
var postUrl = "./SimpleService.svc/image";
var xhr = new XMLHttpRequest();
xhr.open("POST", postUrl);
xhr.setRequestHeader("Content-Type", "image/png");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var res_url = URL.createObjectURL(new Blob([xhr.responseText]));
var lnk = document.getElementById("dlink");
lnk.href = res_url;
lnk.style.display = "block";
}
}
xhr.send(imgData);
};
reader.readAsArrayBuffer(input.files[0]);
}
}
}
function showImage() {
var input = document.getElementById("fid");
if (input.files && input.files[0]) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var img_display = document.getElementById("img2check");
img_display.src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
}
}
}
</script>
<p>
Upload the image here:
</p>
<input id="fid" name="fid" type="file" />
<p/>
<button type="submit" onclick="javascript: getPixels()">Upload</button>
<p />
<hr />
<p>
<img id="img2check" src="" alt="" />
</p>
<p />
<p>
<a id="dlink" href="#" download="Data.html" style="display: none;">Download data</a>
</p>
</body>
</html>
函数getPixels（）{
showImage（）；
var输入=document.getElementById（“fid”）；
if（input.files&&input.files[0]）{
if（typeof（FileReader）！=“未定义”）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var imgData=e.target.result；
var postrl=“./SimpleService.svc/image”；
var xhr=new XMLHttpRequest（）；
xhr.open（“POST”，postrl）；
setRequestHeader（“内容类型”、“图像/png”）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
var res_url=url.createObjectURL（新Blob（[xhr.responseText]）；
var lnk=document.getElementById（“dlink”）；
lnk.href=res\u url；
lnk.style.display=“块”；
}
}
xhr.send（imgData）；
};
reader.readAsArrayBuffer（input.files[0]）；
}
}
}
函数showImage（）{
var输入=document.getElementById（“fid”）；
if（input.files&&input.files[0]）{
if（typeof（FileReader）！=“未定义”）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var img_display=document.getElementById（“img2check”）；
img_display.src=e.target.result；
};
reader.readAsDataURL（input.files[0]）；
}
}
}
在此处上载图像：
上传
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript">
function getPixels() {
showImage();
var input = document.getElementById("fid");
if (input.files && input.files[0]) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var imgData = e.target.result;
var postUrl = "./SimpleService.svc/image";
var xhr = new XMLHttpRequest();
xhr.open("POST", postUrl);
xhr.setRequestHeader("Content-Type", "image/png");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var res_url = URL.createObjectURL(new Blob([xhr.responseText]));
var lnk = document.getElementById("dlink");
lnk.href = res_url;
lnk.style.display = "block";
}
}
xhr.send(imgData);
};
reader.readAsArrayBuffer(input.files[0]);
}
}
}
function showImage() {
var input = document.getElementById("fid");
if (input.files && input.files[0]) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var img_display = document.getElementById("img2check");
img_display.src = e.target.result;
};
reader.readAsDataURL(input.files[0]);
}
}
}
</script>
<p>
Upload the image here:
</p>
<input id="fid" name="fid" type="file" />
<p/>
<button type="submit" onclick="javascript: getPixels()">Upload</button>
<p />
<hr />
<p>
<img id="img2check" src="" alt="" />
</p>
<p />
<p>
<a id="dlink" href="#" download="Data.html" style="display: none;">Download data</a>
</p>
</body>
</html>
函数getPixels（）{
showImage（）；
var输入=document.getElementById（“fid”）；
if（input.files&&input.files[0]）{
if（typeof（FileReader）！=“未定义”）{
var reader=new FileReader（）；
reader.onload=函数（e）{
var imgData=e.target.result；
var postrl=“./SimpleService.svc/image”；
var xhr=new XMLHttpRequest（）；
xhr.open（“POST”，postrl）；
setRequestHeader（“内容类型”、“图像/png”）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4）{
var res_url=url.createObjectURL（新Blob（[xhr.responseText]）；
var lnk=document.getElementById（“dlink”）；
lnk.href=res\u url；
lnk.style.display=“块”；
}
}
xhr.send（imgData）；
};
reader.readAsArrayBuffer（input.files[0]）；
}
}
}
函数showImage（）{
var输入=document.getElementById（“fid”）；
if（input.files&&input.files[0]）{
如果（典型