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

Question

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

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

它创建自定义敲除绑定，一些代码部分：

HTML：

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

淘汰赛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);
    }
};

它是如何工作的：

1. dropUpload 自定义绑定使用拖动的文件填充可观察数组

2. 为了上传文件，使用了新的 API FormData，因为向后兼容性似乎不是问题。 FormData 更易于使用。

3. 按照本文了解如何让您的 webapi 接受 FormData http://www.asp.net/web-api/overview/working-with-http/sending-html-form-data,-part-2