I NICIO
BLSearch... OG CURSOS
VIDEOTUTORIALES
PORTAFOLIO
CONTACTO
OPEN SOURCE
INICIO
BLOG
CURSOS
VIDEOTUTORIALES
PORTAFOLIO
CONTACTO
Search...
OPEN SOURCE
¿CÓMO ENVIAR UN ARCHIVO POR AJAX DE #JQUERY? Home
C#
HTML5
Javascript script Java
Jquery y Jquer
¿Cómo Enviar Un Archivo Por Ajax De #Jquery?
[A-] [A+]
Para enviar un archivo por medio de Ajax en realidad r ealidad es muy fácil, fácil, sobre todo con la función Ajax de jquery, jquery, para ello lo demuestro dem uestro a continuación: continuación: Primero tenemos tenemos el código código html html siguien siguiente, te, el cual tiene tie ne un form formulario ulario con un campo de texto y un input input file, file, es importante que el atributo del form enctype sea multipart/formdata ata,, si no es asi no se enviara el archivo. 1 2 3 4 5
<
id= id ="frmFormulario" enctype enctype= ="multipart/form-data" "multipart/form-data"> > < type= type ="text" name name= ="uncampo" "uncampo"> > < type= type ="file" name name= ="archivo" "archivo"> > < type= type ="submit" value value= ="Enviar" "Enviar"> > >
Ahora tenem Ahora tenemos os que seleccionar( seleccionar(sele selectores ctores de jquery jquery)) el f ormulario ormulario para que haga el envió por Ajax (Ver: (Ver: ¿Cómo hacer una petición Ajax por medio de submit? ) y para ello utilizo el siguiente código en javascript en javascript el el cual esta comentado a detalle: 1 2 3
$(document).ready(
() {
//sobreescribimos //sobreescribi mos el metodo submit para que envie la solicitud
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 petición común, es decir evita 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 parametros= FormData($( )[0]) //realizamos la petición ajax con la función de jquery $.ajax({ type: "POST", url: url, data: parametros, contentType: , //importante enviar este parametro processData: , //importante enviar este parametro success: (data) { alert("Se capturo el archivo con éxito") }, error: (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 backend 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: 1 2 3 4 5 6 7 8 9
//controlador de mvc.net Archivo : Controller{ ActionResult Recibe( {
uncampo, HttpPostedFileBase archi
//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.
Uber Driver GRATIS (482.105) Establece Tu Horario. Maneja con Uber. Comienza a Ganar Dinero.
Descargar
Héctor De León | 13 Mayo, 2016
About Héctor De León Desarrollador de software, lector compulsivo.
View all posts by Héctor De León
Previous
¿Cómo Concatenar Un TimeSpan A Un DateTime En C# .Net?
Next
¿Cómo 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 Lógicos En #Javascript – Aprende A Programar Desde Cero (SIN CENSURA) 24 septiembre, 2016
¿Cómo Parsear El Formato Dd-Mm-Yy En Un DateTime En C# .Net? 20 septiembre, 2016
9.- Objetos En #Javascript (Básico) – Aprende A Programar Desde Cero (SIN CENSURA) 17 septiembre, 2016
Como Instalar El Software Para Gimnasio HDELEON 11 septiembre, 2016
CATEGORÍAS Algoritmos
API Google Maps
Blog
Curso Básico de Javascript
C#
Aprende a programar desde cero (SIN CENSURA)
Curso Programación Orientada a Objetos POO Javascript O
S
Jquery Ph
Laravel 5 S lS
Curso Básico de Jquery Cursos
Errores
Lenguajes de Programación T
ASP .NET MVC 4
t SQL
Vid
t t i l
Frameworks – APIs Magick.Net
MVC .Net
HTML5 mysql
ETIQUETAS abstraccion ajax
alertas algoritmos
de ordenamiento animate array arreglos atributo burbuja
curso de POO curso
javascript curso jquery
canvas
Clase clases cmmi
cursos
document DOM each else encriptación eq estructura de control find foreach funciones function
getElementById gmail
CSS
javascript jquery json Objeto
googlemaps html input
parent Programación
Orientada a Objetos selector selectores this visual studio
window
Theme: supernova by Sayed Taqui. | Supernova Themes
Twitter Auto Publish Powered By : XYZScripts.com
