Para enviar un archivo por medio de Ajax en realidad es muy fácil, sobre todo con la función Ajax de jquery, para ello lo demuestro a continuación:
Primero tenemos el código html siguiente, el cual tiene un formulario con un campo de texto y un input file, es importante que el atributo del form enctype sea multipart/form-data, si no es asi no se enviara el archivo.
<form id="frmFormulario" enctype="multipart/form-data">
<input type="text" name="uncampo">
<input type="file" name="archivo">
<input type="submit" value="Enviar">
</form>
Ahora tenemos que seleccionar(selectores de jquery) el formulario para que haga el envió por Ajax (Ver: ¿Cómo hacer una petición Ajax por medio de submit?) y para ello utilizo el siguiente código en javascript el cual esta comentado a detalle:
$(document).ready(function () {
//sobreescribimos el metodo submit para que envie la solicitud por ajax
$("#frmFormulario").submit(function (e) {
//esto evita que se haga la petición común, es decir evita que se refresque la pagina
e.preventDefault();
//ruta la cual recibira nuestro archivo
url="@Url.Content("~/Archivo/Recibe")"
//FormData es necesario para el envio de archivo,
//y de la siguiente manera capturamos todos los elementos del formulario
var parametros=new FormData($(this)[0])
//realizamos la petición ajax con la función de jquery
$.ajax({
type: "POST",
url: url,
data: parametros,
contentType: false, //importante enviar este parametro en false
processData: false, //importante enviar este parametro en false
success: function (data) {
alert("Se capturo el archivo con éxito")
},
error: function (r) {
alert("Error del servidor");
}
});
})
})
Y este es el trabajo que se hace en el front-end, ahora solo queda hacer el método en el back-end el cual capture el archivo y lo guarde o realice la acción deseada con el fichero; por ejemplo en Mvc.Net seria de la siguiente manera:
//controlador de mvc.net
public class Archivo : Controller{
public ActionResult Recibe(string uncampo, HttpPostedFileBase archivo)
{
//aqui va el codigo que deseemos para manipular el archivo
}
}
Y así de fácil se envía un archivo por medio de Ajax. Dudas o comentarios pueden hacérmelos llegar y yo les respondo en breve.
