javascript - 将 ByteArray 从 Knockout.js 发布到 Web 服务

Question

我是 KnockoutJS 的新手，到目前为止我一直在研究它，但我尽我所能无法在任何地方找到此信息，所以我希望社区能提供帮助!在我看来，我对文件输入有以下数据绑定(bind):

 <input type="file" data-bind="value: ImageToUpload"/>
 <button data-bind="click: $root.saveImage">Upload</button>

这是“foreach”div 中列表的一部分，因此变量“ImageToUpload”对应于该列表中对象的属性。

在我的 ViewModel 中，上传按钮调用 saveImage()，我调用网络服务并将表单数据传递到 .aspx 页面:

self.saveImage = function (MyObject, event) {

    $.post("Service.aspx", MyObject,  function (returnedData) {

    });
}

该对象很好地传递到我的服务，我可以按预期访问所有表单数据，包括“ImageToUpload”变量……但这是我卡住的地方:

1) "ImageToUpload"只是一个字符串，表示我上传的文件的名称，而不是 ByteArray。如何访问图像文件而不仅仅是名称？

2) 是否有更好的方法将 ByteArray 作为 Stream 或响应头中的其他格式传递？

3) 我的技术完全不行吗？有一个更好的方法吗？我的目标是拥有一个上传到的图像“插槽”的动态列表。

提前致谢!

Answer 1

无法访问本地文件内容是 JavaScript 安全沙箱的一个基本限制。它随着 HTML5 file API 的引入而解除, 但不幸的是，支持是 far from universal .如果您的代码需要在不兼容的浏览器中工作，您唯一的选择是让浏览器处理传统的 multipart/form-data 上传。另一方面，如果不支持 IE < 10 对您来说没问题，则可以使用具有自定义绑定(bind)的“knockout 方式”文件 API。看看这个例子:http://khayrov.github.com/jsfiddle/knockout-fileapi (出于某种原因 jsFiddle 当我尝试在其中运行这段代码时，对我来说很糟糕)。 Source code在 Github。