it-swarm.com.de

datei-Upload mit Knockout-js

Datei-Upload funktioniert nicht mit Knockout-Js. Ich habe mit untenstehendem Code versucht, aber nicht funktioniert. Bitte erwähne, wo ich falsch mache.

Dies ist meine Dateikontrolle und Schaltfläche. Ich kann die ausgewählte Datei nicht vom Client an den Server senden. Bitte schlagen Sie vor, was der beste Ansatz dafür ist.

<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>
9
Manoj Paul

Ich habe mir diese Lösung für mein aktuelles Projekt ausgedacht.

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

Anscheinend benötigen Sie eine benutzerdefinierte KO-Bindung für das Hochladen von Dateien. Es gibt verschiedene api/libs, die alle Fehlerfälle mit zusätzlichen Funktionen behandeln. Versuchen Sie Folgendes: https://github.com/TooManyBees/knockoutjs-file-binding

4
Vijay
<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) {}
    });
}
2
Mudasser Iqbal

Sie können Folgendes tun:

Aussicht :

<input type="file" id="files" name="files[]" multiple data-bind=" event:{change: $root.fileSelect}" />
<output id="list"></output>

<ul>    
    <!-- ko foreach: files-->
    <li>
        <span data-bind ="text: name"></span>: <img class="thumb" data-bind = "attr: {'src': src, 'title': name}"/>
    </li>
    <!-- /ko -->  
</ul>

JS:

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());

Die Demo finden Sie im Link: http://jsfiddle.net/fPWFd/436/

0
Hussam Kurd

Für Magento 2 ist der folgende Code nützlich, um das hochgeladene Bild durch Knockout-Js anzuzeigen.

In der HTML-Datei

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

Js-Datei muss wie folgt codiert werden

 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);
          }
        },
      });
  });
}

der obige Code funktioniert gut mit meinem Projekt.

0
Bhaumik Rana