INICIO

BLOG
CURSOS
Search...

VIDEOTUTORIALES

PORTAFOLIO

CONTACTO

OPEN SOURCE

INICIO

BLOG

CURSOS

VIDEOTUTORIALES

PORTAFOLIO

CONTACTO

Search...

OPEN SOURCE

CMO ENVIAR UN ARCHIVO POR AJAX DE #JQUERY?

Home

C#

HTML5

Javascript

Jquery

Cmo Enviar Un Archivo Por Ajax De #Jquery?

[A-] [A+]

Para enviar un archivo por medio de Ajax en realidad es muy fcil, sobre todo con la
funcin Ajax de jquery, para ello lo demuestro a continuacin:
Primero tenemos el cdigo 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/formdata, si no es asi no se enviara el archivo.
1
2
3
4
5

<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: Cmo hacer una peticin Ajax por medio de submit?) y para ello utilizo el
siguiente cdigo en javascript el cual esta comentado a detalle:
1
2
3
4

$(document).ready(function () {

//sobreescribimos el metodo submit para que envie la solicitud por ajax

$("#frmFormulario").submit(function (e) {

5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//esto evita que se haga la peticin comn, es decir evita que se r

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 formu
var parametros=new FormData($(this)[0])

//realizamos la peticin ajax con la funcin 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 mtodo en el backend el cual capture el archivo y lo guarde o realice la accin deseada con el fichero; por
ejemplo en Mvc.Net seria de la siguiente manera:
1
2
3
4
5
6
7
8
9

//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 fcil se enva un archivo por medio de Ajax. Dudas o comentarios pueden

hacrmelos llegar y yo les respondo en breve.

Uber Driver
GRATIS

(482.105)

Establece Tu Horario.
Maneja con Uber. Comienza a Ganar
Dinero.

Descargar

Hctor De Len | 13 Mayo, 2016

About Hctor De Len

Desarrollador de software, lector compulsivo.

View all posts by Hctor De Len

Previous

Cmo Concatenar Un TimeSpan A Un DateTime En C# .Net?

Next

Cmo Ejecutar Una Consulta SQL Directa Utilizando Entity Framework?

ME DAS PARA UNA CERVEZA?

ENTRADAS RECIENTES
Como Obtener El Nombre Del Navegador Por Medio De #Javascript #Js
26 noviembre, 2016

10.- Operadores Lgicos En #Javascript Aprende A Programar Desde Cero (SIN CENSURA)
24 septiembre, 2016

Cmo Parsear El Formato Dd-Mm-Yy En Un DateTime En C# .Net?

20 septiembre, 2016

9.- Objetos En #Javascript (Bsico) Aprende A Programar Desde Cero (SIN CENSURA)
17 septiembre, 2016

Como Instalar El Software Para Gimnasio HDELEON

11 septiembre, 2016

CATEGORAS
Algoritmos

API Google Maps

Blog

Curso Bsico de Javascript

C#

Aprende a programar desde cero (SIN CENSURA)

Curso Programacin Orientada a Objetos POO

Javascript
Open Source

Jquery
Php

Laravel 5
Sql Server

ASP .NET MVC 4

Curso Bsico de Jquery

Cursos

Errores

Lenguajes de Programacin
Transact SQL

Frameworks APIs
Magick.Net

Videotutoriales

MVC .Net

HTML5
mysql

ETIQUETAS
abstraccion ajax

alertas algoritmos de ordenamiento animate array arreglos

atributo burbuja

curso javascript curso jquery

canvas

Clase clases cmmi CSS curso de POO

cursos

document DOM each else encriptacin eq estructura de control find foreach funciones function

getElementById gmail googlemaps

html input javascript jquery json Objeto

parent Programacin Orientada a Objetos selector selectores this visual studio

window

Theme: supernova by Sayed Taqui. | Supernova Themes

Twitter Auto Publish Powered By : XYZScripts.com