我有一个WebApi/MVC应用程序,我正在开发一个angular2客户端(以取代MVC).我在理解Angular如何保存文件时遇到了一些麻烦.
该请求是确定的(正常工作与MVC,我们可以登录接收到的数据),但我无法弄清楚如何保存下载的数据(我主要是遵循同样的逻辑这篇文章).我确信这是非常简单的,但到目前为止,我根本不理解它.
组件功能的代码如下.我尝试过不同的方案,则斑的方法应该是,据我了解的路要走,但没有作用createObjectURL在URL.我甚至找不到URL窗口中的定义,但显然它存在.如果我使用该FileSaver.js模块,我会得到同样的错误.所以我猜这是最近发生的变化或者尚未实施.如何在A2中触发文件保存？
downloadfile(type: string){
let thefile = {};
this.pservice.downloadfile(this.rundata.name, type)
.subscribe(data => thefile = new Blob([data], { type: "application/octet-stream" }), //console.log(data),
error => console.log("Error downloading the file."),
() => console.log('Completed file download.'));
let url = window.URL.createObjectURL(thefile);
window.open(url);
}
为了完整起见,获取数据的服务如下,但它唯一做的是发出请求并传递数据而不进行映射(如果成功):
downloadfile(runname: string, type: string){
return this.authHttp.get( this.files_api + this.title +"/"+ runname + "/?file="+ type)
.catch(this.logAndPassOn);
}
我允许用户通过拖放和其他方法将图像加载到页面中.删除图像时,我正在使用URL.createObjectURL转换为对象URL来显示图像.我没有撤销网址,因为我重复使用它.
所以,当谈到时间来创建一个FormData对象,所以我可以让他们上传的形式,在它的形象之一,是有一些方法,然后我可以扭转这一目标URL回一个Blob或File因此我可以将其添加到FormData宾语？
有没有办法将HTML Canvas的内容作为二进制数据读取？
目前我有以下HTML来显示输入文件和它下面的画布:
<p><button id="myButton" type="button">Get Image Content</button></p>
<p>Input:<input id="fileInput" type="file"/></p>
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>
我然后设置我的输入文件以正确设置画布,这工作正常:
$('#fileInput').on('change', function() {
$.each(this.files, function() {
var image = new Image();
image.src = window.URL.createObjectURL(this);
image.onload = function() {
$("canvas").drawImage({
source: image,
x: 50, y: 50,
width: 100,
fromCenter: false
});
};
});
});
我现在需要在单击按钮时从Canvas获取二进制数据(Base64编码),因此它会将数据推送到服务器...
最终的结果是我需要为用户提供选择文件的能力,裁剪/调整大小,然后单击一个按钮,此时编辑的图像将上传到服务器(我不能做服务器端)由于服务器端限制而裁剪/调整大小...)
任何帮助都会很棒!干杯
使用FileReader's readAsDataURL()我可以将任意数据转换为数据URL.有没有办法Blob使用内置的浏览器apis 将数据URL转换回实例？
我需要在我的Web应用程序中生成图像的缩略图.我使用Html 5 File API生成缩略图.
我使用了以下URL中的示例来生成缩略图.
http://www.html5rocks.com/en/tutorials/file/dndfiles/
我成功地能够生成缩略图.我遇到的问题是我只能使用静态大小生成缩略图.有没有办法从所选文件中获取文件尺寸,然后创建Image对象？
无论如何要通过<input type="file" />元素限制文件类型的选择？
例如,如果我只想上传图像类型,我会将可能的选择限制为(image/jpg,image/gif,image/png),选择对话框会使其他mime类型的文件变灰.
ps我知道我可以通过扫描.type属性在File API之后执行此操作.我真的试图限制这一点..我也知道我可以通过闪存做到这一点,但我不想为此使用闪存.
我想在画布上绘制一个用HTML5 File API打开的图像.
在该handleFiles(e)方法中,我可以访问文件,e.target.files[0]但我无法直接使用该图像drawImage.如何从HTML5画布上的File API中绘制图像？
这是我用过的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
window.onload = function() {
var input = document.getElementById('input');
input.addEventListener('change', handleFiles);
}
function handleFiles(e) {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.drawImage(e.target.files[0], 20,20);
alert('the image is drawn');
}
</script>
</head>
<body>
<h1>Test</h1>
<input type="file" id="input"/>
<canvas width="400" height="300" id="canvas"/>
</body>
</html>
我需要在客户端为生成的文本数据添加UTF-8字节顺序标记.我怎么做？
当然,使用new Blob(['\xEF\xBB\xBF' + content])产量'"my data"'.
也没有'\uBBEF\x22BF'工作('\x22' == '"'成为下一个角色content).
是否可以将JavaScript中的UTF-8 BOM添加到生成的文本中？
是的,在这种情况下我确实需要UTF-8 BOM.
注意:
下面的答案反映了2009年遗留浏览器的状态.现在,您可以在2017年通过JavaScript实际设置文件输入元素的值.
有关详细信息和演示,请参阅此问题中的答案:
如何以编程方式设置文件输入值(即:拖放文件时)？
我有一个网站,允许用户多次上传文件进行处理.目前我有一个文件输入,但我希望能够记住用户选择并在屏幕上显示它.
我想知道怎么做是在用户选择文件后我会记住他们的选择并使用在重新加载页面时预先选择的文件重新显示文件输入.我需要知道的是如何记住和重新填充文件输入.
我也对不使用文件输入的方法持开放态度(如果可能的话).
我正在使用JQuery
DataTransferItemList.add允许您在javascript中覆盖复制操作.但是,它只接受File对象.
我copy活动中的代码:
var items = (event.clipboardData || event.originalEvent.clipboardData);
var files = items.items || items.files;
if(files) {
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
files.add(blob);
}
chrome中的错误:
未捕获的类型错误:未能执行
add上DataTransferItemList:参数1的类型为不File.
new File(Blob blob, DOMString name)在谷歌浏览器中,我根据当前的规范尝试了这个:
var blob = Blob.fromDataURL(_this.editor.selection.getSelectedImage().toDataURL("image/png"));
var file = new File(blob, "image.png");
这里的问题是,谷歌浏览器不太符合规格.
未捕获的TypeError:构造失败
File:非法构造函数
在这种情况下,Firefox也不是:
方法参数缺失或无效.
new File([Mixed blobParts], DOMString name, BlobPropertyBag options)@apsillers建议的解决方案也不起作用.这是在Firefox和Chrome中使用(但无用)的非标准方法.
我试图避免blob,但文件构造函数仍然失败:
//Canvas to binary
var …fileapi ×10
javascript ×8
html5 ×4
file-upload ×2
html5-canvas ×2
angular ×1
blob ×1
blobs ×1
download ×1
drawimage ×1
html ×1
thumbnails ×1
typescript ×1
utf-8 ×1