web-dev-qa-db-fra.com

téléchargement de fichier en knockout js

Le téléchargement de fichier ne fonctionne pas avec knockout js. J'ai essayé avec le code ci-dessous mais ne fonctionne pas. S'il vous plaît mentionner où je vais mal.

Ceci est mon contrôle de fichier et le bouton. Je ne parviens pas à envoyer le fichier sélectionné du côté client au serveur. S'il vous plaît suggérer quelle est la meilleure approche pour cela.

<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>
javascriptc#knockout.js
9
Manoj Paul

Je suis venu avec cette solution pour mon projet actuel.

<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

On dirait que vous avez besoin d'une liaison par knockout personnalisée pour le téléchargement de fichiers. Il existe différentes api/libs disponibles qui gèrent tous les cas d'erreur avec des fonctionnalités supplémentaires. Essayez ceci: 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

Vous pouvez faire ce qui suit:

Vue :

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

Vous pouvez trouver la démo dans le lien: http://jsfiddle.net/fPWFd/436/

0
Hussam Kurd

Pour Magento 2, le code ci-dessous est utile pour afficher l'image téléchargée par knockout js.

En fichier html

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

Le fichier Js doit coder comme ci-dessous

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

le code ci-dessus fonctionne bien avec mon projet.

0
Bhaumik Rana