使用knockout js上传文件

Question

文件上传无法使用knockout js.我试过下面的代码,但没有工作.请提一下我做错的地方.

这是我的文件控件和按钮.我无法将所选文件从客户端发送到服务器.请建议最好的方法是什么.

<input id="files" name="files" type="file" class="input-file" data-bind="file: FileProperties.FileName"/> 
<button data-bind="click : Upload">Upload</button>

<script type="text/javascript">

    ko.bindingHandlers.file = {
        init: function (element, valueAccessor) {
            alert('init');
            $(element).change(function () {
                var file = this.files[0];
                if (ko.isObservable(valueAccessor())) {
                    valueAccessor()(file);
                }
            });
        }
</script>

Answer 1

我为我当前的项目提出了这个解决方案.

<img class="myImage" data-bind="attr: {src: $root.photoUrl() || 'images/tempImage.png'}"/>
<input data-bind="event: {change: $root.fileUpload}" type="file" accept="image/*" class="fileChooser"/>

<script>
var myController = function()
{
    var self = this;
    this.photoUrl = ko.observable();      
    this.fileUpload = function(data, e)
    {
        var file    = e.target.files[0];
        var reader  = new FileReader();

        reader.onloadend = function (onloadend_e) 
        {
           var result = reader.result; // Here is your base 64 encoded file. Do with it what you want.
           self.photoUrl(result);
        };

        if(file)
        {
            reader.readAsDataURL(file);
        }
    };
};
</script>

Answer 2

似乎您需要一个自定义的淘汰赛绑定来上传文件。有各种可用的 api/lib 可以通过附加功能处理所有错误情况。试试这个：https: //github.com/TooManyBees/knockoutjs-file-binding