Comunidad de diseño web y desarrollo en internet online

no me funciona este javascript ajax en el navegador FIREFOX

Citar            
MensajeEscrito el 21 Oct 2014 11:24 am
Hola , buenos días.

Alguien me podría ayudar?

He realizado este programa ( realmente es una copia de un video ingles de youtube)para subir archivos a mi servidor web con una barra de progresión y me funciona perfectamente con todos los navegadores menos con FIREFOX.

Necesitaría que alguien me ayudara para solucionarlo y funcione con FIREFOX.

Gracias de antemano, un saludo

<!DOCTYPE HTML>
<html><head>
<head>
<script>
/* Script written by Adam Khoury @ DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
//alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php?usuario=<?php echo $_GET['usuario']; ?>"),false;//true para que funcione con firefox
ajax.send(formdata);
}
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>

</body>
</html>

Por cronin100

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 22 Oct 2014 04:35 am
Si le asignas el parámetro "true" y funciona con firefox tal vez lo podrías resolver condicionando si el navegador es firefox.

Código HTML :

<!DOCTYPE HTML>
<html><head>
    <head>
        <script>
            /* Script written by Adam Khoury @ DevelopPHP.com */
            /* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
            function _(el){
                return document.getElementById(el); 
            }
            function uploadFile(){
                var file = _("file1").files[0];
                var is_firefox = navigator.userAgent.indexOf('Firefox') > -1;
                //alert(file.name+" | "+file.size+" | "+file.type);
                var formdata = new FormData();
                formdata.append("file1", file);
                var ajax = new XMLHttpRequest();
                ajax.upload.addEventListener("progress", progressHandler, false);
                ajax.addEventListener("load", completeHandler, false);
                ajax.addEventListener("error", errorHandler, false);
                ajax.addEventListener("abort", abortHandler, false);
                if(is_firefox) { // Condicionamos si el navegador es firefox le damos el parametro "true"
                    alert(2);
                    ajax.open("POST", "file_upload_parser.php?usuario=<?php echo $_GET['usuario']; ?>"), true;  }
                else { // De lo contrario lo dejamos como estava
                    ajax.open("POST", "file_upload_parser.php?usuario=<?php echo $_GET['usuario']; ?>"), false; }
                ajax.send(formdata);
            }
            function progressHandler(event){
                _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
                var percent = (event.loaded / event.total) * 100;
                _("progressBar").value = Math.round(percent);
                _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
            }
            function completeHandler(event){
                _("status").innerHTML = event.target.responseText;
                _("progressBar").value = 0;
            }
            function errorHandler(event){
                _("status").innerHTML = "Upload Failed";
            }
            function abortHandler(event){
                _("status").innerHTML = "Upload Aborted";
            }
        </script>
    </head>
    <body>
        <h2>HTML5 File Upload Progress Bar Tutorial</h2>
        <form id="upload_form" enctype="multipart/form-data" method="post">
            <input type="file" name="file1" id="file1"><br>
            <input type="button" value="Upload File" onclick="uploadFile()">
            <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
            <h3 id="status"></h3>
            <p id="loaded_n_total"></p>
        </form>

    </body>
    </html> 


Saludos!

Por alejandroC

34 de clabLevel



 

firefox
Citar            
MensajeEscrito el 22 Oct 2014 07:17 am
Hola AlejandroC.

Gracias por contestar.

NO FUNCIONA

el comentario de esta linea(ajax.open("POST", "file_upload_parser.php?usuario=<?php echo $_GET['usuario']; ?>"),false;//true para que funcione con firefox) la puse porque un colega me dijo que funcionaría, y NO FUNCIONA y se me olvidó de quitarle el comentario cuando envié este post.

No funciona con true ni con false. En realidad la linea original es esta (ajax.open("POST", "file_upload_parser.php?usuario=<?php echo $_GET['usuario']?>")

Sete ocurre otra causa el porque no funciona?

Gracias, saludos

Por cronin100

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 22 Oct 2014 12:15 pm
Pues al leer el código que has posteado, la línea que te causa problemas tiene un gazapo que si bien no causa error de sintaxis sí hace que las cosas no funcionen como esperas.

Esta línea:

Código Javascript :

ajax.open("POST", "file_upload_parser.php?usuario=<?php echo $_GET['usuario']; ?>"), true;


Debería ser:

Código Javascript :

ajax.open("POST", "file_upload_parser.php?usuario=<?php echo $_GET['usuario']; ?>", true);

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 22 Oct 2014 01:19 pm
Gracias por contestar DriverOp.

corrigiendo la linea que comentas, hace lo mismo.

Funciona perfectamente en Chrome y Safary pero en Firefox y IE nada de nada, lo puedes comprobar tu mismo en el siguiente enlace:

Email: [email protected]
Pass: driverop

http://www.maneldiaz.com/login_ENGLISH.php

Gracias de antemano y un saludo

Por cronin100

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 22 Oct 2014 04:49 pm
Veo...

Me parece que el problema no tiene nada que ver con el objeto ajax.

En esta línea:

Código Javascript :

_("status").innerHTML = event.target.responseText;


En responseText está la respuesta del servidor, por lo que es seguro que la petición Ajax se realizó y FireBug me confirma que así es.

Sin embargo el código HTML que está en responseText no se asigna al innerHTML del elemento con id "status" y sospecho que es porque el código HTML que está en responseText incluye los tags <html> y <head>. Por lo que veo así pretendes hacer una redirección a otra página cuando la petición Ajax se haya completado. Firefox no lo interpreta así.

Además, a pesar de que funciona en Chrome y Opera, no es la forma correcta de hacer una redirección. Tienes que usar el método assign del objeto window.location.

Esa parte yo la haría así:

Suponiendo que la respuesta Ajaz sea sola y únicamente la URL de redirección:

Código Javascript :

function completeHandler(event){
   _("progressBar").value = 0;
   window.location.assign(event.target.responseText);
}


No lo puedo probar porque no tengo acceso a los códigos fuentes, obviamente...

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 22 Oct 2014 07:22 pm
Ahora graba el fichero pero no me dirige a la pagina donde recojo las variables para enviar por correo la información al usuario.

Prueba tu mismo con el mismo usuario y pass y veras el error.
Email: [email protected]
Pass: driverop
http://www.maneldiaz.com/login_ENGLISH.php

Si me das tu correo, puedo entrarlo en el login para que veas la información que recibes si el fichero se envia correctamente sin error

Por cronin100

2 de clabLevel



 

chrome
Citar            
MensajeEscrito el 23 Oct 2014 12:13 pm
Seguimos por privado...

Por DriverOp

Claber

2510 de clabLevel



 

opera

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.