De carga de archivos no trabajar con knockout js. He probado con el código de abajo, pero no de trabajo. Por favor, mencionar donde estoy haciendo mal.

Este es mi archivo de control y el botón. Soy incapaz de enviar el archivo seleccionado desde el cliente al servidor. Por favor, sugiera cuál es el mejor enfoque para este.

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

OriginalEl autor Manoj Paul | 2015-01-15

5 Comentarios

  1. 19

    Se me ocurrió esta solución para mi proyecto actual.

    <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>
    este es garantizado para trabajar en IE?
    ¿Qué versión? Probablemente bueno para IE 10 y el Borde.

    OriginalEl autor Mardok

  2. 2
    <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) {}
        });
    }

    OriginalEl autor Mudasser Iqbal

  3. 0

    Puede hacer lo siguiente:

    Vista :

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

    Usted puede encontrar el demo en el enlace:
    http://jsfiddle.net/fPWFd/436/

    OriginalEl autor Hussam Kurd

  4. 0

    Para Magento 2 a continuación el código es útil para mostrar la imagen subida por knockout js.

    En el archivo html

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

    Js archivo de código de la siguiente

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

    código anterior está trabajando muy bien con mi proyecto.

    Bienvenido a Desbordamiento de Pila! Mientras que este código puede responder a la pregunta, es mejor incluir un poco de contexto, explicando cómo funciona y cuándo usarlo. Código sólo las respuestas tienden a ser menos útil en el largo plazo. Consulte ¿Cómo puedo escribir una buena respuesta? para más información.

    OriginalEl autor Bhaumik Rana

Dejar respuesta

Please enter your comment!
Please enter your name here