Nueva pregunta

Pregunta:

 
  1  
 
 
WiKe Search Karma: 4 España
 
 Fecha: 15-09-2016 05:25:28 (En Español)

¿Cómo subir archivos a un servidor sin recargar la página?[No resuelta]

hola amigos, he estado mirando por estos foros y... he visto como puedo enviar un archivo a mi servidor con el codigo:

(HTML)

		<form name="formulario" enctype="multipart/form-data" action="" onsubmit="enviarDatos(); return false">
			<input name="uploadedfile" type="file" id="file"/>
			<input type="submit" value="Subir archivo" />
		</form>


(PHP)

		<?php
			$target_path = "Images/";
			$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 
			if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) 
			{ 
				echo '<script language="javascript">alert("El archivo '. basename( $_FILES["uploadedfile"]["name"]).' ha sido subido");</script>';
			} else
			{
				echo '<script language="javascript">alert("Ha ocurrido un error, trate de nuevo!");</script>';
			}
			?>
			<script type="text/javascript">
			history.back()	
			</script>
			<?php
		?>


le he añadido el "history.back()" para k vuelva a la pagina anterior, y me funciona correctamente, pero ahora lo que intento es que nisiquiera salga d la pagina y no tenga que volver a recargarla, subirlo d manera transparente y demas, segun he visto por la red tengo este codigo:

(HTML)
(JAVASCRIPT)

				function objetoAjax(){
					var xmlhttp = false;
					try 
					{
						xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
					} catch (e) 
					{
						try 
						{
							xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
						} 
						catch (E) 
						{
							xmlhttp = false; 
						}
					}
 
					if (!xmlhttp && typeof XMLHttpRequest!='undefined') 
					{
						xmlhttp = new XMLHttpRequest();
					}
					return xmlhttp;
				}
				function enviarDatos(){
 					//Recogemos los valores introducimos en los campos de texto
					res = document.getElementById('result');
					res2 = document.getElementById('result2');
					res2.value = document.formulario.file.value;
 					//instanciamos el objetoAjax
					ajax = objetoAjax();
					//Abrimos una conexión AJAX pasando como parámetros el método de envío, y el archivo que realizará las operaciones deseadas
					ajax.open("POST", "upload.php", true);
					//cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
					ajax.onreadystatechange = function() 
					{
						//Cuando se completa la petición, mostrará los resultados 
						if (ajax.readyState == 4)
						{
							//El método responseText() contiene el texto de nuestro 'consultar.php'. Por ejemplo, cualquier texto que mostremos por un 'echo'
							res.value = (ajax.responseText) 
						}
					} 
 					//Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario. 
					ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
					//enviamos las variables a 'consulta.php' 
					ajax.send() 
}
			</script>


(HTML)

		<input type="text" id="result" style="width: 1257px;";>
		<form name="formulario" enctype="multipart/form-data" action="" onsubmit="enviarDatos(); return false">
			<input name="uploadedfile" type="file" id="file"/>
			<input type="submit" value="Subir archivo" />
		</form>
		<input type="text" id="result2" style="width: 1257px;";>


(el input result para ver la respuesta del php y el result2 para "capturar" la ruta del archivo)

y (PHP)

			<?php
			$target_path = "Images/";
			$target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 
			if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path)) 
			{ 
				echo "El archivo '. basename( $_FILES["uploadedfile"]["name"]).' ha sido subido";
			} else
			{
				echo "Ha ocurrido un error, trate de nuevo!";
			}
		?>


mi pregunta es... como pase el archivo????
supongo que el codigo esta bien, ya que se me llega a ejecutar el php pasando por el javascript del codigo html,
con el javascript se me rellena el result2 con la ruta del fichero, eso es correcto, y el php me rellena el valor del result con un "Ha ocurrido un error, trate de nuevo!"

mi pregunta es... donde esta mi fallo? como tengo que pasarle el archivo para que me lo ejecute correctamente?????


MUCHISIMAS GRACIAS POR ADELANTADO Etiquetas: AJAX - Formulario - Javascript - JQuery - PHP - Pregunta - Subir Archivos (Upload) Votos: 1 - Respuestas: 4 - Vistas: 23 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  •  
      2  
     
     
    Antuan Kavalkanty Karma: 2008 Argentina
     
    Fecha: 17-09-2016 11:46:03 WIKE

    Buenas tardes

    Vamos por partes ...
    JAVASCRIPT esta del lado del CLIENTE mientras que PHP esta del lado del servidos
    Lo que te esta faltando es un interprete entre el JS y PHP.
    En este caso debes utilizar JSON o AJAX

    Un saludo

    Daniel       Votos: 2 - Link respuesta
     
  •  
      0  
     
     
    Anonimo Anonimo Karma: -4 No especificado
     
    Fecha: 20-09-2016 07:47:40 Buenas tardes, por lo que tengo entendido subir archivos desde javascript, por cuestiones de seguridad no se puede o por lo menos, no es recomendable. Si el sacrificio es recargar la página al subir archivos es muy probable que se justificable.

    Imaginando que, desde el cliente le doy la posibilidad de subir cualquier cosa al servidor, por mi parte, no me importa mucho que se recargue la página si me salva de cualquier otra cosa

    Saludos

    DIEGO       Votos: 0 - Link respuesta
     
  •  
      0  
     
     
    Antuan Kavalkanty Karma: 2008 Argentina
     
    Fecha: 20-09-2016 08:45:38 DIEGO
    Buenas tardes
    Desde el cliente no vas a poder subir nada, al menos que hagas algo parecido a esto:

    Ejemplo para subir un archivo con AJAX y JQuery

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Upload de archivos con Ajax</title>
</head>
<body>
    
    <form enctype="multipart/form-data" id="formuploadajax" method="post">
        Nombre: <input type="text" name="nombre" placeholder="Escribe tu nombre">
        <br />
        <input  type="file" id="archivo1" name="archivo1"/>
        <br />
        <input  type="file" id="archivo2" name="archivo2"/>
        <br />
        <input type="submit" value="Subir archivos"/>
    </form>
    <div id="mensaje"></div>
    
    
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
    $(function(){
        $("#formuploadajax").on("submit", function(e){
            e.preventDefault();
            var f = $(this);
            var formData = new FormData(document.getElementById("formuploadajax"));
            formData.append("dato", "valor");
            //formData.append(f.attr("name"), $(this)[0].files[0]);
            $.ajax({
                url: "recibe.php",
                type: "post",
                dataType: "html",
                data: formData,
                cache: false,
                contentType: false,
	     processData: false
            })
                .done(function(res){
                    $("#mensaje").html("Respuesta: " + res);
                });
        });
    });
    </script>
</body>
</html>
       Votos: 0 - Link respuesta
     
  •  
      1  
     
     
    Anonimo Anonimo Karma: -4 No especificado
     
    Fecha: 20-09-2016 14:19:14 Antuan y con ese ejemplo no recargás toda la página? Porque si no es así, esa sería la respuesta a la pregunta que hizo Wike.

    Creo que .on("submit", ... sería como darle propiedades de submit a un input button, no?

    Son dudas que tengo. Lo que escribí por ahí es lo que he leído, no he buscado más y las subidas de archivo las hago con php

    Excelente tu respuesta

    Saludos

    DIEGO       Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com