Javascript 使用knockoutjs上传文件

使用敲除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>

上传
ko.bindingHandlers.file={
init：函数（元素、值访问器）{
警报（'init'）；
$（元素）.更改（函数（）{
var file=this.files[0]；
if（ko.isObservable（valueAccessor（）））{
valueAccessor（）（文件）；
}
});
}

似乎您需要一个自定义的敲除绑定来上传文件。有各种api/LIB可用于处理所有错误情况，并具有其他功能。 试试这个：

---

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

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

var myController=函数（）
{
var self=这个；
this.photoUrl=ko.observable（）；
this.fileUpload=函数（数据，e）
{
var file=e.target.files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（onloadend_e）
{
var result=reader.result；//这是您的base 64编码文件。请随意使用它。
self.photoUrl（结果）；
};
如果（文件）
{
reader.readAsDataURL（文件）；
}
};
};

函数（）
{
var files=$（“#FileName”）.get（0）.files；
var data=new FormData（）；
对于（var x=0；x

您可以在以下链接中找到演示：

---

对于Magento 2，下面的代码有助于通过knockout js显示上传的图像。

在html文件中

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

---

以上代码与我的项目配合得很好。

欢迎使用堆栈溢出！虽然此代码可能会回答这个问题，但最好包含一些上下文，解释它是如何工作的以及何时使用它。从长远来看，仅代码回答往往不太有用。有关更多信息，请参阅。

var ViewModel = function() {
    var self = this;     
    self.files=  ko.observableArray([]);
    self.fileSelect= function (elemet,event) {
        var files =  event.target.files;// FileList object

        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

          // Only process image files.
          if (!f.type.match('image.*')) {
            continue;
          }          

          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
              return function(e) {                             
                  self.files.push(new FileModel(escape(theFile.name),e.target.result));
              };                            
          })(f);
          // Read in the image file as a data URL.
          reader.readAsDataURL(f);
        }
    };
};

var FileModel= function (name, src) {
    var self = this;
    this.name = name;
    this.src= src ;
};

ko.applyBindings(new ViewModel());

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

 define(['ko', 'uiComponent', 'jquery'], function (ko, Component, $) {
   'use strict';
    var photoUrl;
    return Component.extend({
      photoUrl : ko.observable(),
      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);
          }
        },
      });
  });
}