Question

我正在寻找使用Knockout + .NET WebApi技术的拖放文件上传组件。

我找到了File Api项目，它不支持旧浏览器，但我可以忍受它。代码在这里：https://github.com/khayrov/khayrov.github.com/tree/master/jsfiddle/knockout-fileapi。

它创建自定义Knockout Bindings，一些代码部分：

HTML：

 <input type="file" accept="image/*" data-bind="file: imageFile, fileObjectURL: imageObjectURL, fileBinaryData: imageBinary"/>

Knockout JS：

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);
            }
        }
    }

不幸的是，我不明白我是否可以重复使用此代码并将其集成到某些拖放文件上传组件中？

是否有任何现有的DnD文件上传组件可以与knockout + webapi一起使用？

Answer 1

请参阅此http://jsfiddle.net/3LT9d/

function noopHandler(evt) {
    evt.preventDefault();
    return false;
}

ko.bindingHandlers.dropUpload = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        element.addEventListener('dragenter', noopHandler, false);
        element.addEventListener('dragover', noopHandler, false);

        element.addEventListener('drop', function (evt) {
            evt.preventDefault();

            var value = valueAccessor();
            for (var i = 0; i < evt.dataTransfer.files.length; i++) {
                value.push(evt.dataTransfer.files[i]);
            }
        }, false);
    }
};

工作原理：

dropUpload自定义绑定使用拖动的文件填充可观察数组
要上传文件，请使用新的API FormData，因为向后兼容性似乎不是问题。 FormData更易于使用。
请按照本文了解如何允许您的webapi接受FormData http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-2

拖放文件上传（knockout + web api + asp.net）

1 个答案: