淘汰赛js文件上传对IE无效

时间:2016-12-09 10:34:04

标签: javascript jquery internet-explorer knockout.js durandal

我正在使用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>&nbsp;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];
  

未定义文件

0 个答案:

没有答案