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
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:
HTML:
ViewModel:
Espero Que Esta Ayuda 🙂
OriginalEl autor praneeth4victory
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
y reemplazar el botón de etiqueta con la siguiente
porque el botón de etiqueta automáticamente envía el formulario.
OriginalEl autor Gabe