Загрузка файла с помощью нокаута js

Question

Загрузка файла не работает с использованием нокаута 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

Похоже, вам нужна индивидуальная привязка нокаута для загрузки файлов. Существуют различные api/libs, которые обрабатывают все случаи ошибок с дополнительными функциями. Попробуйте следующее: https://github.com/TooManyBees/knockoutjs-file-binding

Answer 2

Я придумал это решение для своего текущего проекта.

<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 3

<input type="file" id="FileName" style="width:180px" data-bind="value:addModel.InputFileName" /> 

function() 
{ 
    var files = $("#FileName").get(0).files; 
    var data = new FormData(); 
    for (var x = 0; x < files.length; x++) { 
     data.append("file" + x, files[x]); 
    } 

    $.ajax({ 
     type: "POST", 
     url: '/api/Controller' + '/?id=' + id), 
     contentType: false, 
     processData: false, 
     data: data, 
     success: function (result) {} 
     error: function (xhr, status, p3, p4) {} 
    }); 
}