使用具有自定义绑定的文件上载控件来更新可观察对象不会有问题,这会导致上传的文件存储在图像上传文件夹中。
但是如何反向执行此操作以便在编辑文章时我可以再次检索“文件对象”以链接到fileupload控件?因为它绑定到自定义绑定,所以无法手动设置其中的observable(我试图将imageURL设置为我知道存在的路径,但该值不会粘住并保持未定义。)
我相信我需要以某种方式将主“文件”可观察再次设置为文件对象,但是我不知道如何通过我的ajax调用来完成 - 我将如何返回“文件”,就像它一样刚刚在fileupload控件中被选中了?
<input type="file" id="articleImage" data-bind="fileUpload: imageFile, fileObjectURL: imageObjectURL" />
ko.bindingHandlers.fileUpload = {
init: function (element, valueAccessor) {
$(element).change(function () {
var file = this.files[0];
if (ko.isObservable(valueAccessor())) {
valueAccessor()(file);
}
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
var file = ko.utils.unwrapObservable(valueAccessor());
var bindings = allBindingsAccessor();
if (bindings.fileObjectURL && ko.isObservable(bindings.fileObjectURL )) {
var oldUrl = bindings.fileObjectURL ();
if (oldUrl) {
windowURL.revokeObjectURL(oldUrl);
}
bindings.fileObjectURL (file && windowURL.createObjectURL(file));
}
}
};
当我在编辑文章时从文件加载数据并尝试将imageObjectURL设置为字符串时,它只是忽略它并将其保留为null。如果我从data-bind html定义中删除第二个参数,我可以直接设置observable。
imageObjectURL也绑定到图像控件,当我选择图像时工作正常,而不是当我尝试从文件设置它时。
imageObjectURL("//path/to/image/image.jpg")
不起作用 - imageObjectURL保持“未定义”,除非我从数据绑定定义中删除它。