Bueno, hace un tiempo publiqué un posteo en donde podíamos subir archivos al servidor en forma asíncrona, ya que Ajax sólo permite enviar texto, mas no archivos, y lo hacíamos mediante un iframe. Sin embargo, un compañero de trabajo me dijo que sí se podían subir archivos evitando el uso de iframe, así que dedico esta publicación justamente a mi amigo y compañero, Alberto ‘Toni’ Mamone.
IMPORTANTE: Antes de comenzar. Esto fue testeado en navegadores viejos como Explorer 7 y no funciona, tendrás que usarlo sólo en navegadores que soporten Html5.
Buscando encontré esto en youtube:
http://www.youtube.com/watch?v=AZJfXr2LZXg
Acá publican un video en dónde se muestra cómo subir archivos al servidor de forma asíncrona y mostrando una precarga.
¡Comencemos!
Para empezar vamos a crear un archivo .php (también puede ser .html) al que yo llamaré index.php:
<!DOCTYPE html>
<html>
<head>
<title> Subida y precarga ajax </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Css -->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<!-- Javascript -->
<script src="js/jquery-2.0.2.js"></script>
<script src="js/upload.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
function subirArchivos() {
$("#archivo").upload('subir_archivo.php',
{
nombre_archivo: $("#nombre_archivo").val()
},
function(respuesta) {
//Subida finalizada.
$("#barra_de_progreso").val(0);
if (respuesta === 1) {
mostrarRespuesta('El archivo ha sido subido correctamente.', true);
$("#nombre_archivo, #archivo").val('');
} else {
mostrarRespuesta('El archivo NO se ha podido subir.', false);
}
mostrarArchivos();
}, function(progreso, valor) {
//Barra de progreso.
$("#barra_de_progreso").val(valor);
});
}
function eliminarArchivos(archivo) {
$.ajax({
url: 'eliminar_archivo.php',
type: 'POST',
timeout: 10000,
data: {archivo: archivo},
error: function() {
mostrarRespuesta('Error al intentar eliminar el archivo.', false);
},
success: function(respuesta) {
if (respuesta == 1) {
mostrarRespuesta('El archivo ha sido eliminado.', true);
} else {
mostrarRespuesta('Error al intentar eliminar el archivo.', false);
}
mostrarArchivos();
}
});
}
function mostrarArchivos() {
$.ajax({
url: 'mostrar_archivos.php',
dataType: 'JSON',
success: function(respuesta) {
if (respuesta) {
var html = '';
for (var i = 0; i < respuesta.length; i++) {
if (respuesta[i] != undefined) {
html += '<div class="row"> <span class="col-lg-2"> ' + respuesta[i] + ' </span> <div class="col-lg-2"> <a class="eliminar_archivo btn btn-danger" href="javascript:void(0);"> Eliminar </a> </div> </div> <hr />';
}
}
$("#archivos_subidos").html(html);
}
}
});
}
function mostrarRespuesta(mensaje, ok){
$("#respuesta").removeClass('alert-success').removeClass('alert-danger').html(mensaje);
if(ok){
$("#respuesta").addClass('alert-success');
}else{
$("#respuesta").addClass('alert-danger');
}
}
$(document).ready(function() {
mostrarArchivos();
$("#boton_subir").on('click', function() {
subirArchivos();
});
$("#archivos_subidos").on('click', '.eliminar_archivo', function() {
var archivo = $(this).parents('.row').eq(0).find('span').text();
archivo = $.trim(archivo);
eliminarArchivos(archivo);
});
});
</script>
</head>
<body>
<div class="container">
<h1> Subida y precarga ajax </h1>
<div id="respuesta" class="alert"></div>
<form action="javascript:void(0);">
<div class="row">
<div class="col-lg-2">
<label> Nombre el archivo: </label>
</div>
<div class="col-lg-2">
<input type="text" name="nombre_archivo" id="nombre_archivo" />
</div>
<div class="col-lg-2">
<input type="file" name="archivo" id="archivo" />
</div>
</div>
<hr />
<div class="row">
<div class="col-lg-2">
<input type="submit" id="boton_subir" value="Subir" class="btn btn-success" />
</div>
<div class="col-lg-4">
<progress id="barra_de_progreso" value="0" max="100"></progress>
</div>
</div>
</form>
<hr />
<div id="archivos_subidos"></div>
</div>
</body>
</html>
Vamos a analizar el código. En primer lugar cargamos la librería de Twitter Bootstrap para darle un poco de estilo a nuestra página:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery-2.0.2.js"></script>
<script src="js/upload.js"></script>
Éste será el que nos permitirá subir archivos al servidor con Ajax.
El mismo nos proveerá de un método llamado .upload(), el cual va a recibir cuatro parámetros. El primero será el archivo .php donde se hará la petición. El segundo será un json con variables que serán enviadas al servidor. El tercero será una función que se va a disparar en el momento que el navegador obtenga una respuestas del servidor. Y finalmente, el cuarto parámetro nos irá indicando el porcentaje de la precarga:
<?php
if (isset($_FILES['archivo'])) {
$archivo = $_FILES['archivo'];
$extension = pathinfo($archivo['name'], PATHINFO_EXTENSION);
$time = time();
$nombre = "{$_POST['nombre_archivo']}_$time.$extension";
if (move_uploaded_file($archivo['tmp_name'], "archivos_subidos/$nombre")) {
echo 1;
} else {
echo 0;
}
}
?>
<?php
$directorio_escaneado = scandir('archivos_subidos');
$archivos = array();
foreach ($directorio_escaneado as $item) {
if ($item != '.' and $item != '..') {
$archivos[] = $item;
}
}
echo json_encode($archivos);
?>
<?php
if (isset($_POST['archivo'])) {
$archivo = $_POST['archivo'];
if (file_exists("archivos_subidos/$archivo")) {
unlink("archivos_subidos/$archivo");
echo 1;
} else {
echo 0;
}
}
?>
gracias por el script, tengo algunas preguntas. Esto funciona sin ninguna libreria intalada? (APC, uploadprogress, zend opcache, etc). Es necesaria la ver 1.7 de jquery o puedo usar la mas reciente? Que version de PHP? Saludos
Orlando cómo estás, gracias a vos por pasarte.
Respondiendo a tus preguntas:
– No, no necesitás tener instalada ninguna librería, de hecho de las que nombraste yo no tengo instalado nada de eso y aún así funciona.
– Yo usé la versión 1.7 Jquery, pero con la última debería funcionar correctamente también.
– La versión de PHP debería ser desde la 5 para arriba.
En realidad no depende tanto del servidor (PHP, Asp, Java, RoR, Python, etc), sino del navegador. De hecho algo que me olvidé agregar es que los en navegadores medianamente viejos como Explorer 7 este ejemplo no funciona, supongo que porque está preparado para soportar Html5, pero el archivo upload.js se rompe.
Saludos!
Gracias… buen trabajo.
Muchas gracias Orlando. Que andes bien.
Saludo!
Hola que tal, tengo una duda es necesario usar el bootstrap ?
No, sólo Jquery y la librería de upload.js. Bootstrap es para darle un poco de estilo.
Saludos!
Como puedo adaptarlo a mí codigo te lo adjunto, lo que hace es levantar un documento de excel CSV y lo guarda una base de datos.
$(«#BTN_IMPORT_FORM_MOVE_INVENT»).click(function()
{
$(«.error»).fadeOut().remove();
if ($(«#DELIMITADOR»).val() == «») {
$(«#DELIMITADOR»).focus().after(‘Campo requerido, debe elegir un delimitador !!!’);
return false;
}
if ($(«#INPUT_CSV»).val() == «») {
$(«#INPUT_CSV»).focus().after(‘No has seleccionado un archivo CSV !!!’);
return false;
}
loading_show();
var formData = new FormData($(«#IMPORT_FORM_MOVE_INVENT»)[0]);
$.ajax({
type: «POST»,
url: «create/IMPORT_FORM_MOVE_INVENT_CSV.php»,
data: formData,
contentType: false,
processData: false,
success: function(data)
{
$(«#MSJ_IMPORT_FORM_MOVE_INVENT»).html(data);
$(«#INPUT_CSV»).val(»);
loading_hide();
}
});
$(«#DELIMITADOR, #INPUT_CSV»).bind(‘blur keyup’, function(){
if ($(this).val() != «») {
$(‘.error’).fadeOut();
return false;
}
});
return false;
});
Saludos
Muy bueno Fer!!!
Excelente, lo voy a usar.
Gracias por tanta magia!!
jajaja, lo vamos a usar!!!
Gracias por compartir con todos nosotros toda esta practica información. Con estos granitos de arena hacemos màs grande la montaña Internet. Enhorabuena por este post.
Saludos
Gracias a vos por pasarte.
Saludos!
Muy bueno te felicito. Pero tengo un problemita. En el localhost me funciona correctamente, pero en el servidor me dice «EL archivo NO se ha podido subir»..
¿Que puede ser?
Tomás, muchas gracias por firmar.
Mirá, si tu servidor está en Linux lo más probable es que la carpeta donde se guardan los archivos no tiene permisos. Para ello conectate con Filezilla y con el botón derecho del mouse cambia los permisos a 755.
Fijate, y cualquier cosa me avisás.
Saludos!
Amigo estoy siguiendo paso a paso tu post pero no veo que los archivos de ejemplo que colocas sirve el mostrar y eliminar archivos, hay que agregar algo adicional??
Sí sirven. Esos archivos son las acciones donde se envía la petición Ajax:
Fijate dentro de index.php en las funciones de Javascript eliminarArchivos() y mostrarArchivos(), las url donde se envía el Ajax.
Saludos!
Exelente post felicidades por este aporte ,queria consultarle si es posible cambiar la figura de la barra
gracias
Jhon gracias a vos por comentar.
Bueno, respondiendo a tu pregunta. Fijate esta función:
$(«#archivo»).upload(‘subir_archivo.php’,
{
nombre_archivo: $(«#nombre_archivo»).val()
},
function(respuesta) {
//Subida finalizada.
$(«#barra_de_progreso»).val(0);
if (respuesta === 1) {
alert(‘El archivo ha sido subido correctamente.’);
} else {
alert(‘El archivo NO se ha podido subir.’);
}
}, function(progreso, valor) {
//Barra de progreso.
$(«#barra_de_progreso»).val(valor);
});
El útlimo parámetro que recibe el método upload(), es una función de tipo callback:
function(progreso, valor) {
///Barra de progreso.
$(«#barra_de_progreso»).val(valor);
}
Esa función va a dispararse cada vez que el servidor le devuelva al navegador el porcentaje de la precarga. Por tanto ese parámetro «valor», es que irá subiendo a medida que el archivo se procese, empezando por 1, 2, 3, y así sucesivamente hasta llegar a 100%, que es la carga completa.
Lo que tendrías que hacer modificar el interior de esa función, agregando tu propio código, y teniendo en cuenta que ese segundo parámetro, «valor», será el que te irá indicando el porcentaje que lleva la precaga.
Saludos!
A alguien le funciona esto con la JQuery 1.9.1?
Silvia, leyendo tu comentario me di cuenta que el ejemplo no funciona en ejemplos a partir de la versión 1.9 de Jquery. Por tanto cambié el código, con la versión 2.0.2.js, pero lo probé en la 1.9.1, y también funciona.
Aquí te dejó la versión actualizada de Github:
https://github.com/fernandoggaitan/subida_y_precarga_ajax
Gracias, por avisar.
Saludos!
Buenas tardes que buen aporte!!!
Pero tengo un pequeño problema al intentar cargar un archivo observo el siguiente error en el js upload
Uncaught TypeError: Cannot set property ‘upload’ of undefined
No se a que se debe me podrían ayudar a resolver este inconveniente gracias.
Bendiciones Hermano
Miguel, eso pasa porque como dije al principio de la publicación, este ejemplo funciona con los navegadores más nuevos, en versiones medianamente viejas, como Internet Explorer 7, ese archivo upload.js se rompe.
Es importante tener en cuenta esto, ya que si pensás subirlo a una web, tendrías que tener una sentencia try catch, por si se rompe, darle otra alternativa al usuario para subir archivos.
Saludos!
Hola tengo un problema, por que me dice que no se puede subir el archivo. Uso linux mint y cambie los permisos de las carpetas a 777 y nada… que puede pasar?
Te dejo los errores que larga al tratar de subir un archivo con firefox:
El uso de getPreventDefault() está desaprobado. Use en su lugar defaultPrevented. jquery-2.0.2.js:4939
12:53:33.276 El formulario contiene un campo de entrada de archivo, pero no usa method=POST ni enctype=multipart/form-data en el formulario. El archivo no será enviado. index.php
12:57:19.402 POST http://localhost/subidas/subir_archivo.php [HTTP/1.1 200 OK 2ms]
12:57:19.327 El formulario contiene un campo de entrada de archivo, pero no usa method=POST ni enctype=multipart/form-data en el formulario. El archivo no será enviado. index.php
12:57:19.408 GET http://localhost/subidas/mostrar_archivos.php [HTTP/1.0 500 Internal Server Error 1ms]
12:57:39.692 POST http://localhost/subidas/subir_archivo.php [HTTP/1.1 200 OK 2ms]
12:57:39.633 El formulario contiene un campo de entrada de archivo, pero no usa method=POST ni enctype=multipart/form-data en el formulario. El archivo no será enviado. index.php
12:57:39.696 GET http://localhost/subidas/mostrar_archivos.php [HTTP/1.0 500 Internal Server Error 2ms]
Qué versión del navegador usás?
Hola buen aporte oye una duda si quisiera guardar el archivo en una base de datos de mysql dentro de un campo de tipo blob.
Gracias 🙂
Marcos, cómo estás. Mirá yo sinceramente nunca hice eso. Pero Html5 da la posibilidad de enviar el binario de un archivo mediante Ajax, y así lo vas a poder guardar en un blob.
Tal vez te sirva este artículo:
http://www.html5rocks.com/en/tutorials/file/xhr2/
Saludos!
Muchas gracias por el articulo 🙂
Muchas gracias por compartir, me gustaria saber si se puede cambiar el tamañano del archivo, por que probe con uno de 120mb y me dijo EL ARCHIVO NO SE HA PODIDO SUBIR. SALUDOS
Sí, se puede, pero no depende de Javascript, sino de la configuración del servidor. Si usás PHP, deberías ir a tu php.ini, y ahí configurar que la subida permita la cantidad que querés.
Saludos!
Graaaande Fer! No sabes cuánto código he revisado y es el primero que funciona… lo único que necesitaba era subir un archivo, pero con alguna barrita de estado, jeje. La que funcionaba con un «simple» php y jquery ya la conocía, ahora veré si esta supera la prueba de los nombres.. resulta que tenía problemas con los nombres que tienen caracteres como «ñ» o tildes.. en vuestro código se reemplaza el nombre del archivo, supongo que puedo probar concatenando el nombre original al reemplazo.
De antemano, muchas gracias!!
Gracias por tu aporte,
es de gran ayuda que compartas tus conocimiento (Y)
Sera posible también así como sube las imágenes.
Dar un clic a su nombre del archivo se pueda visualizar ahí mismo con un popup y agregar un botón para descargar la imagen.???
Saludos
Sí, pero de momento no tengo mucho tiempo para hacerlo.
Simplemente tendrías que copiar la ruta al archivo en esa ventana.
Saludos!
Muchísimas gracias por el aporte, lo he probado y funciona a las mil maravillas.
Ahora estoy intentado que sea multiarchivo pero no consigo hacerlo funcionar.
¿Alguna sugerencia?
Ángela, fijate en este video la última parte, el tipo muestra cómo hacer subida de varios archivos:
https://www.youtube.com/watch?v=AZJfXr2LZXg
De ahí es de dónde lo saqué.
Saludos!
Muchísimas gracias!!!! 🙂
Hola, quiero agradecerte por el aporte, porque realmente probé muchas cosas y no me funcionaba. Sin embargo, esto funciono perfecto!
Me alegro que haya funcionado.
Que tengas un buen día.
Saludos!
HOLA amigo exelento script, una consulta, que tanto puede pesar el archivo a subir? o no tiene limite de archivo?
Tezor, a ver. Vos podés filtrar la cantidad de memoria que permitís subirle al usuario. Sin embargo, ésta dependerá también de la configuración del apache.
Si subiste tu proyecto está en un hosting o servidor compartido, tendrás que consultar la cantidad de memoria que te permite subir. Si ellos te pueden aumentar la memoria de subida, bien, sino vas a tener que conformarte con lo que hay.
Si en cambio vos sos el que administra el servidor deberías ir a tu archivo php.ini y modificar las líneas:
upload_max_filesize = xxM y post_max_size = xxM por la cantidad de memoria en MB (donde xx está el número de MB) que necesitás como tope para la subida de archivos.
Saludos!
pues, me aparece que No se pudo subir 🙁 estoy sdubiendo mp3
Sí podés, pero hay que ver si ese archivo .mp3 no supera el número de memoria en MB que tiene permitido el servidor.
Gracias maestro… es el primero que pruebo que funciona perfecto. Me das una mano tremenda con mi proyecto.
Quería consultarte por una modificacion… será posible mostrar una miniatura o algo asi de la imagen en vez del nombre?
Desde ya muchisimas gracias
Sí, dentro del archivo PHP, deberías devolver la ruta al archivo:
En lugar de
echo 1;
Hacés:
echo «archivos_subidos/$nombre»
Y luego esa respuesta te va a servir para mostrar una etiqueta img con la ruta a esa imagen.
Saludos.
Excelente…
Muchisimas gracias por el dato.
Me sirvió un montón.
Me alegro mucho.
Gracias por comentar.
Saludos!
Buenas tardes, muchas gracias por tu aporte, lo estoy adaptando en mi programacion y va de escandalo, me baje los ficheros tal cual para comprobar que tal funcionaban. Y mi pregunta es la siguiente,
de que sirve el primer input text antes del boton examinar, si al seleccionar el fichero nunca se escribe dentro el nombre?
Muchas gracias
Rocío, ese campo de ingreso es el que te permite ponerle el nombre al archivo, el cual luego se concatena con esos caracteres que se generan automáticamente.
Saludos!
Buenas tardes, muchas gracias por contestar.
Es totalmente lógico lo q me dices, pero como estaba inmersa en lo que stoy haciendo, en mi mundo de yupi yo decia si ese campo no lo necesito que sentido tiene, pero claro jaja, es mi caso particular ya que no doy opcion de nombrar el fichero al usuario, y la gestión se hace interna.
La verdad es que lo he tocado entero, adaptado y añadido nuevas funciones, como base para lo que he hecho tu codigo ha sido genial, y me ha solucionado mas de un problema.
Por otro lado he aprovechado mostrar archivos para mi sección de mostrar las imagenes guardadas en un directorio concreto que el usuario busca, en fin, que muchas muchas gracias.
Bueno, me alegro que te haya servido.
Que tengas un lindo día.
Saludos!
Que tal? Excelente aporte amigo. Una pregunta, haz intentado hacer lo mismo usando cakephp?
Gracias!
No, la verdad nunca programé en cakephp.
Saludos!
Muchas gracias por el código. Es exactamente lo que buscaba.
Saludos.
Gracias a vos.
Saludos!
Hola antes que nada muy buen aporte la verdad me sirvió bastante.
Tengo una duda como puedo hacerle para evitar que me cabie el nombre de la imagen ?
Simplemente tendrías que cambiar:
$nombre = «{$_POST[‘nombre_archivo’]}_$time.$extension»;
Por:
$nombre = «{$_POST[‘nombre_archivo’]}.$extension»;
excelente amigo, muy buen aporte, disculpa una pregunta, yo utilizo tu código para enviar un archivo csv al servidor leo las lineas y lo guardo en la base de datos, mi pregunta es ¿como recibo una confirmación enviada desde el servidor php a el código utilizado?
Perdón, no entiendo bien la pregunta.
Que tal, amigo excelente aporte su uso es libre verdad?. Y algo mas al subir archivos de un peso considerable, llega al 100% y ejecutando la funcion php move_uploaded_file, se toma su tiempo. Es posible reflejar ese proceso en la barra de progreso. Pues esta llega a 100 y hay se queda un buen tiempo, cuando en realidad aun no ha finalizado. Gracias por el aporte una vez mas, es admirable ese gran trabajo
Sí, es libre, el autor lo subió a un repositorio público de github. Con respecto a lo otro que me decís, no sé, a mí me funciona correctamente, la demora en el 100% es mínima.
Saludos!
en el upload.js me marca un error: define its not defined, hay algo que este haciendo mal?
Estás usando la librería de Jquery? De ser así, en qué versión? Y en qué navegador y versión lo estás probando?
Saludos!
Muy buen trabajo, gracias por compartir esta información.
Gracias a vos, Juan.
muchas gracias!!! por este aporte… se que ocupa tiempo y esfuerzo! mes sirve de mucho para el proyecto en el cual estoy trabajando… una consulta conoces alguna galeria responsive que lea la carpeta contenedora de las imagenes sin necesidad de linkearlas una por una en el html? algo asi ?? un gran abrazo!
OTRA COSITA… EN DONDE SE CONFIGURA QUE TIPOS DE ARCHIVOS SUBIR?
Debería preguntar con un if en:
$extension
Gracias. Y la verdad no, no conozco una página que haga eso.
Saludos!
gracias a vos!!! por ultimo… cuando subis la imagen, tenes que nombrarla, pero cuando sube la imagen le agrega una serie de nros(por ejemplo nombro a la imagen «imagen» y cuando la sube, el nombre es «imagen_45455684») puede evitarse eso? gracias!!!
Sí, vas a tener que modificar:
$archivo = $_FILES[‘archivo’];
$extension = pathinfo($archivo[‘name’], PATHINFO_EXTENSION);
$time = time();
$nombre = «{$_POST[‘nombre_archivo’]}_$time.$extension»;
Por:
$archivo = $_FILES[‘archivo’];
$extension = pathinfo($archivo[‘name’], PATHINFO_EXTENSION);
$nombre = «{$_POST[‘nombre_archivo’]}.$extension»;
El problema es que si un usuario sube un archivo con ese mismo nombre a esa carpeta, entonces el nuevo archivo va a reemplazar al viejo, y así se va a perder el primero.
Saludos!
muchas gracias!!!! la verdad que tengo que capacitarme con el tema de php veo que es algo muy necesario!!!sabes algun codigo para agregarle al index.php para poder visualizar miniaturas de las imagenes? muchas gracias!!!!!! abrazo de gol!!!!
Sí, deberías usar thumb para imágenes. Pero también podés usar css para archicar imágenes.
Saludos!
Hola muchas gracias por el tutorial , las funciones de listar y eliminar de archivos todavía no se encuentra implementadas en un botón??
Sí, están ahí. Sólo que se generan dinamicamente con Javascript.
Saludos!
buenas compa. exelente ejemplo, lo he usado y funciona vastante bien pero mi caso es el de guardar la ruta en la base de datos para luego se buscado el archivo q se quiere. el problema es q guarda el nombre a medias a pesar de q la info se guarda en campos text de 1000 caracteres.
otra cosa es que yo quiero no solo subir el archivo sino q varia info q paso en otros campos del formulario. En mi ignorancia la pregunta es si el ejemplo tal cual esta pasa toda la info del formulario?
Muchas gracias por el aporte me sirvió de mucho me gustaría tener comunicación contigo y intercambiar códigos…
Hola amigo podrías ayudarme a instalar un script que encontré ..
Si puedes mi correo es fans@dragonballzeta.net, no encuentro ningún tuto :/ escribirme y te paso los datos!
Como edito para que aparezca la url de la pagina?
Osea solo me muestra Hola_1428713316.png y no http://sitioweb/Subirarchivo/archivos_subidos/EL ARCHIVO
Hola que tal, buen aporte y el diseño esta genial,
Sólo una duda, ¿Hay posibilidades de pedir confirmación antes de eliminar un archivo? Digo, por si fue un clic por accidente,
Saludos
César
Sí, con Javascript podés usar un confirm, tipo:
if(confirm(‘¿Está seguro que desea eliminar el archivo?’)){
//Acción de eliminar archivo
}
Saludos!
excelente muchas gracias por el aporte. me sirvió de mucho
De nada Rubén.
Que tengas un buen día.
Saludos!
Hola amigo podrías ayudarme.
en el código de mostrar arvhivo
mostrar_archivos.php
como puedo hacer para
que no me muestre el index.php que tengo en esa carpeta
Hola, esta realmente bueno el tutorial pero tengo un problema.. quisiera cambiar la dirección de envió de archivos , como puedo hacer sin que estos archivos estén en la misma carpeta?
Aver si me explico yo tengo todos los archivos en miweb.com/hola/subi <— aqui tengo el index
Pero quiero que los archivos que suba vallan a miweb.com/aquiestan
Gracias por contestarme saludos
no me ignore porfavor – lo ando necesitando!
Ya que ando fuera y cuando tengo que reemplazar seria una opcion para no entrar por ftp 🙂
Saludos muy bueno el codigo les comento quiero aprender bien ajax y usar json tal vez puedan indicarme algunos link bueno, ahora al punto quiero mostrar tambien la imagen al lado del nombre que se muestra para elimina
Muchas Gracias por tu aporte.
Muy bueno.
Gracias a vos por comentar, Rusbel.
Saludos!
Hola, estoy tratando de hacer un upload de archivos grandes, con esto se podrá lograr? tiene alguna limitacion? yo estoy tratando de subir un archivo ZIP de por ejemplo 20MB
Lo que estuve probando, carga la barra pero al finalizar salta «NO SE HA PODIDO SUBIR EL ARCHIVO».
Alguna sugerencia?
Te respondo lo mismo que a tezor:
Si subiste tu proyecto está en un hosting o servidor compartido, tendrás que consultar la cantidad de memoria que te permite subir. Si ellos te pueden aumentar la memoria de subida, bien, sino vas a tener que conformarte con lo que hay.
Si en cambio vos sos el que administra el servidor deberías ir a tu archivo php.ini y modificar las líneas:
upload_max_filesize = xxM y post_max_size = xxM por la cantidad de memoria en MB (donde xx está el número de MB) que necesitás como tope para la subida de archivos.
Saludos!
Gracias por seguir respondiendo 2 años despues!
Si voy a ver por ese lado, probe con muchas formas, php, js, ajax, y todos suben pero ninguno llega a concretar con archivos grandes.
Estoy haciendo esto para una agencia que me pidió y ellos tienen su servidor de hosting propio, no querian tocar por que le afectan a todos los clientes pero ya estoy cansado de renegar. Así que tendrán que modificar el php.ini.
Bueno gracias nuevamente!
Estimado, te saludo desde Ecuador, muy interesante tu contribucion, pero no logro que funcione, yo tengo un servidor con ip fija, en el cual he montado mi aplicacion, mis proyectos los creo como carpetas dentro de C:/xampp/htdocs, es decir tu proyecto lo cree como C:/xampp/htdocs/UpFiles y dentro de esta estan index.php, subir_archivo.php, eliminar_archivo.php y mostrar_archivos.php, tambien las carpeta js, donde estan upload.js y jquery-2.0.3.js, por ultimo, esta la carpeta archivos_subidos donde se almacenaran los archivos que quiero subir.
En la barra de direcciones escribo http://190.10.156.91:8079/UpFiles/index.php, se carga bien, pero al dar clic en Subir, no hace nada, ni un mensaje.
No se si estoy haciendo bien las referencias a los .js en la cabecera, yo tengo de esta manera:
Alguna sugerencia?
Gracias
Continuo con mi comentario, por cierto pongo el texto para enseñarte la forma como tengo las declaraciones en la cabecera pero se borran del comentario.
Por cierto uso FireFox..
borre los tag script del inicio y el final y yo le agregue las colmillas dobles para ver si me permitia..
«script type=’text/javascript’ src=’./js/jquery-2.0.3.js’script»
«script type=’text/javascript’ src=’./js/upload.js’script»
«script type=’text/javascript’ src=’./css/bootstrap.min.js’script»
Hola amigo … quiero hacerte una pregunta ¿donde debo modificar para agregar mas campos?.
Lo he intentado pero solo funciona con un campo tal y como lo tienes tu. Para explicarte mejor doy un ejemplo: Supongamos que quiero pasar por POST el nombre, precio y fecha de caducidad de un producto claro mas la imagen. Como hago para que los datos llegue a subir_archivo.php y poder guardarlos en una base de datos.
Intente modificando en function subirArchivos algo como esto: nameM: $(«#nameP»).val(), y pasar asi todos los campos pero al llegar a subir_archivo.php solo puedo recuperar uno de los campos.
Espero me puedas ayudar.
Agregás más campos y les ponés id y luego en la parte donde dice:
{
nombre_archivo: $(«#nombre_archivo»).val()
}
Ahí lo reemplazas por los campos que quieras enviar:
{
campo1: $(«#campo1»).val(),
campo2: $(«#campo2»).val(),
campo3: $(«#campo3»).val(),
}
Y luego desde el PHP los recibís con ese nombre:
$campo1 = $_POST[‘campo1’];
$campo2 = $_POST[‘campo2’];
$campo3 = $_POST[‘campo3’];
Saludos!
Hola. Muy bueno. Lo ensayé con archivos de 40 megas y trabaja perfecto. Estoy probándolo con uno de 314 megas y tengo definido los valores del php.ini según esos megas , cree el ,htacces y le puse en el propio php las variables según lo que necesito (máximos). Pero al cargarlo, la barra inicia correctamente y más o menos en la mitad se reinicia. después de llegar de nuevo a la mitad sale el mensaje NO SE PUEDE SUBIR. Lo raro es que la versión local usando WAMP funciona perfectamente. Me podrías ayudar? Gracias!
Ni idea, debe ser un bug de la librería.
Saludos!