Tengo este knockout js script para subir archivos

Este código se activa la carga de evento cuando el usuario selecciona un archivo en el control de carga

Upload.html

    $(function() {
        var viewModel = {
            filename:  ko.observable(""),
        };

        ko.applyBindings(viewModel);
    });

<form>
<input id="upload" name="upload" 
    data-bind="fileUpload: { property: 'filename', url: 'http://localhost/api/upload/PostFormData' }" 
    type="file" /> 

<button id="submitUpload">Upload</button>
</form>

FileUpload.js

ko.bindingHandlers.fileUpload = {
init: function (element, valueAccessor) {
$(element).after('<div class="progress"><div class="bar"></div><div class="percent">0%</div></div><div class="progressError"></div>');
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var options = ko.utils.unwrapObservable(valueAccessor()),
property = ko.utils.unwrapObservable(options.property),
url = ko.utils.unwrapObservable(options.url);
if (property && url) {
$(element).change(function() {
if (element.files.length) {
var $this = $(this),
fileName = $this.val();
//this uses jquery.form.js plugin
$(element.form).ajaxSubmit({
url: url,
type: "POST",
dataType: "text",
headers: { "Content-Disposition": "attachment; filename=" + fileName },
beforeSubmit: function() {
$(".progress").show();
$(".progressError").hide();
$(".bar").width("0%")
$(".percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + "%";
$(".bar").width(percentVal)
$(".percent").html(percentVal);
},
success: function(data) {
//$(".progress").hide();
//$(".progressError").hide();
//set viewModel property to filename
$("label[for='upload']").text(data);
bindingContext.$data[property](data);
},
error: function(jqXHR, errorThrown) {
$(".progress").hide();
$("div.progressError").html(jqXHR.responseText);
}
});
}
});
}
}

}

Ahora, quiero mover el disparo de subir evento al botón de enviar

 <button id="submitUpload">Upload</button>

Cómo hacerlo? Ahora esto es donde estoy yo, acabo de pasar la carga evento dentro del evento click del botón. Pero no funciona, y no llamar a la petición ajax a la API.

  $('#submitUpload').click(function () {
if (element.files.length) {
var $this = $(element),
fileName = $this.val();
//alert(element.form);
//this uses jquery.form.js plugin
$(element.form).ajaxSubmit({
url: url,
type: "POST",
dataType: "text", 
headers: { "Content-Disposition": "attachment; filename=" + fileName },
beforeSubmit: function() {
$(".progress").show();
$(".progressError").hide();
$(".bar").width("0%")
$(".percent").html("0%");
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + "%";
$(".bar").width(percentVal)
$(".percent").html(percentVal);
},
success: function(data) {
//$(".progress").hide();
//$(".progressError").hide();
//set viewModel property to filename
$("label[for='upload']").text(data);
bindingContext.$data[property](data);
},
error: function(jqXHR, errorThrown) {
$(".progress").hide();
$("div.progressError").html(jqXHR.responseText);
}
});
}
});

OriginalEl autor lincx | 2013-06-27

2 Comentarios

  1. 3

    Lugar de pasar el nombre, la URL a la bindinghandler pase tercer parámetro (fileBinaryData) de su ViewModel Objeto, a continuación, leer el Contenido del archivo en KO BindingHandler del método de Actualización, a continuación, actualizar tercer observable (fileBinaryData) en el método de actualización.

    A continuación, puede utilizar este filebinary de datos en la que viewmodel

    así que para el botón de enlazar evento click y acceso fileBinaryData observables que tendrá el contenido del archivo.

    BindingHandler:

    ko.bindingHandlers.FileUpload = {
    init: function (element, valueAccessor) {
    $(element).change(function () {
    var file = this.files[0];
    if (ko.isObservable(valueAccessor())) {
    valueAccessor()(file);
    }
    });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
    var file = ko.utils.unwrapObservable(valueAccessor());
    var bindings = allBindingsAccessor();
    if (bindings.fileBinaryData && ko.isObservable(bindings.fileBinaryData)) {
    if (!file) {
    bindings.fileBinaryData(null);
    } else {
    var reader = new window.FileReader();
    reader.onload = function (e) {
    bindings.fileBinaryData(e.target.result);
    };
    reader.readAsBinaryString(file);
    }
    }
    }
    }

    HTML:

    <input type="file" id="fileUpload" class="file_input_hidden" data-bind="FileUpload: spFile, fileObjectURL: spFileObjectURL, fileBinaryData: spFileBinary" /> 

    ViewModel:

    var viewModel = {
    filename:  ko.observable(""),
    url:  ko.observable(),
    spFileBinary:ko.observable(),
    //Write your CLICK EVENTS
    };

    Espero Que Esta Ayuda 🙂

    Hola, yo no puedo hacer este trabajo… sucede que tiene una versión de trabajo en JSFiddle? Estoy recibiendo el elemento no está definido errores. Supongo que me podría haber equivocado de identificación por algunas razones. Gracias

    OriginalEl autor praneeth4victory

  2. 0

    elemento es desconocido en el momento de hacer clic. usted necesita encontrar en el formulario.
    Inicio de la primera línea de la función de clic con

    element = $('#upload').get(0);

    y reemplazar el botón de etiqueta con la siguiente

    <input type="button" id="submitUpload" value="Upload"></input>

    porque el botón de etiqueta automáticamente envía el formulario.

    OriginalEl autor Gabe

Dejar respuesta

Please enter your comment!
Please enter your name here