Knockout JS: Fileupload evento

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

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

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

2 Comentarios

Dejar respuesta Cancelar respuesta