我正在使用knockout js,我想发布一个文件。它适用于谷歌浏览器和Firefox,但在IE上失败:
file
绑定处理程序:
ko.bindingHandlers.file = {
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));
}
if (bindings.fileBinaryData && ko.isObservable(bindings.fileBinaryData)) {
if (!file) {
bindings.fileBinaryData(null);
} else {
var reader = new FileReader();
reader.onload = function (e) {
bindings.fileBinaryData(e.target.result);
};
reader.readAsArrayBuffer(file);
}
}
}
};
视图模型:
var windowURL = window.URL || window.webkitURL;
self.fileBinary = ko.observable();
var slotModel = function () {
var that = {};
that.imageFile = ko.observable();
that.imageObjectURL = ko.observable();
that.imageBinary = ko.observable();
that.fileSize = ko.computed(function () {
var file = this.imageFile();
return file ? file.size : 0;
}, that);
that.firstBytes = ko.computed(function () {
if (that.imageBinary()) {
var buf = new Uint8Array(that.imageBinary());
var bytes = [];
var bytess = [];
var i;
for (i = 0; i < buf.length; ++i) {
bytess.push(buf[i]);
}
self.fileBinary(bytess);
for (i = 0; i < Math.min(10, buf.length); ++i) {
bytes.push(buf[i]);
}
return '[' + bytes.join(', ') + ']';
} else {
return '';
}
}, that);
return that;
};
查看:
<button type="button" data-bind="click: addSlot">
Add slot</button>
<div data-bind="foreach: { data: images, beforeRemove: beforeRemoveSlot }">
<div>
<input type="file" accept="image/*" data-bind="file: imageFile, fileObjectURL: imageObjectURL, fileBinaryData: imageBinary" />
<div data-bind="if: imageObjectURL">
<img class="thumb" data-bind="attr: { src: imageObjectURL }" />
</div>
<div>
Size: <span data-bind="text: fileSize"></span> bytes</div>
<div>
First 10 bytes: <span data-bind="text: firstBytes"></span>
</div>
<button type="button" data-bind="click: $parent.removeSlot">
Remove</button>
<button type="button" data-bind="click: $parent.uploadFileContent">
Upload File</button>
</div>
</div>
这不仅适用于IE。错误消息在此行:
var file = this.files[0];
未定义文件