这是通过我一起擦洗的单次点击图像上传的示例

here's an example of single click image uploads via knockout I've scrubbed together

html->

<input type="file" data-bind="value: fileName, fileUpload: fileName, url: url">
<script src="{{ STATIC_URL }}html5knockoutImagePreview.js"></script>​

js->

ko.bindingHandlers.fileUpload = {

update: function(element, valueAccessor, allBindingsAccessor){
        var value = ko.utils.unwrapObservable(valueAccessor())
        if(element.files.length && value){
        var file = element.files[0];
        var url = allBindingsAccessor().url

        xhr = new XMLHttpRequest();
        xhr.open("post", url, true);
        xhr.setRequestHeader("Content-Type", "image/jpeg");
        xhr.setRequestHeader("X-File-Name", file.name);
        xhr.setRequestHeader("X-File-Size", file.size);
        xhr.setRequestHeader("X-File-Type", file.type);
        console.log("sending")
        // Send the file (doh)
        xhr.send(file);
        }
  }
}


function MainPageViewModal(){
  this.fileName = ko.observable()
  this.url = "http://127.0.0.1:8000/upload"
}

var mainPageViewModal = new MainPageViewModal()

ko.applyBindings(mainPageViewModal);

小提琴

我不确定您是否满足所有要求，这是针对jpeg的，您需要针对其他类型等调整内容类型标头.

I'm not 100% sure of all your requirements, this is for jpegs, you need to tweak the content type header for other types etc.

编辑

随着您继续遇到问题，此后编写的一些代码可能会有所帮助.它确实使用了jquery ...

As you're continuing to have issues, here's some code that I've written since then that might help. It does use jquery though...

ko绑定->

ko.bindingHandlers.filePreview = {
  update: function(element, valueAccessor, allBindingsAccessor){
      var allBindings = allBindingsAccessor()
      if(!!FileReader && valueAccessor() && element.files.length){
        var reader = new FileReader();
        reader.onload = function(event){
          var dataUri = event.target.result
          allBindings.imagePreview(dataUri)
        }
        reader.onerror = function(e) {
          console.log("error", stuff)
        }
        reader.readAsDataURL(element.files[0])
    }
  }
}

modelPageView->

modelPageView ->

, uploadPreview: function(files){
        var self = this
        self.loadingPreview(true)
        file = files[0]
        if(file.size > 20000000){
          alert("that image is a bit too big for us, got anything smaller?")
        }
        console.log("file size " + file.size)
        var formData = new FormData();
        formData.append("img", file)
        $.ajax({
          url: "/YOUR_UPLOAD_URL",
          type: 'POST',
          data: formData,
          cache: false,
          contentType: false,
          processData: false
      }).done(function(data){
         if(data === "error"){
           alert("somethign wrong happened, please refresh the page")
           return
         }
         self.imgUrl(data.img_url)
         self.imgId(data.img_id)
      }).fail(function(){
        self.loadingPreview(false)
      })
}

html->

<input type="file" accept="image/*" name="img" data-bind="value: img, fileAdded: img, previewFunc: function(files){ $data.uploadPreview(files) }" />

• 此方法的优点是很多框架，例如表单数据 而不只是更好地图像内容类型的数据.
• 我个人认为服务器端的交互应该由 后端模式，这就是为什么代码在那里而不是在 绑定处理程序.
• 如果需要，您还将获得jquery ajax对象的魔力.
• The advantages of this method is a lot of frameworks like form data rather than just image content-type data better.
• Personally I think server side interaction should be driven by the backend modal so that's why the code's there rather than in the binding handler.
• You also get the magic of the jquery ajax object if you need it.

很抱歉延迟回复，我将在几天内达到顶峰，因此，如果您仍然遇到问题，请告诉我.

Sorry about the delay in replying, I'll take a peak in a couple of days, so let me know if you're still having issues.

祝你好运！