Duda Uploadify
Carlos vuelvo a acudir a ti porque me ha surgido una duda con un plugin de Jquery y no sabia solucionarla. El caso es que tengo un formulario con diferentes tipos de entradas ademas de una entrada file que a través del plugin Uploadify me carga los ficheros en un directorio del servidor. Mi duda es si al cargar el fichero puedo retornar el nombre del mismo y pasarlo a través de un campo hidden que también esta en el mismo formulario. El objetivo es que al recibir el formulario se reciba un campo oculto con el path del fichero cargado, esto es la ruta del directorio del servidor donde se almacenan los ficheros y el nombre del fichero subido.
El primer paso de cargar los adjuntos a un directorio me funciona correctamente:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Uploadify</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>
<link type="text/css" rel="stylesheet" href="uploadify.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploader.swf',
'cancelImg': 'cancel.png',
'folder': 'uploads/',
'buttonText': 'Seleccionar',
'checkScript': 'check.php',
'script': 'upload.php',
'multi': true,
'auto':true,
'simUploadLimit': 2
});
});
</script>
</head>
<body>
<input name="fileUpload" id="fileUpload" type="file" />
<a href="javascript:$('#fileUpload').fileUploadStart()">Subir</a> | <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Limpiar</a>
<input type="hidden" name="path_doc" value="">
</body>
</html>
Pero el segundo paso para almacenar el nombre del file en el campo hidden es el que me esta costando porque no se por donde tirar.
El primer paso de cargar los adjuntos a un directorio me funciona correctamente:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Uploadify</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.uploadify.js"></script>
<link type="text/css" rel="stylesheet" href="uploadify.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploader.swf',
'cancelImg': 'cancel.png',
'folder': 'uploads/',
'buttonText': 'Seleccionar',
'checkScript': 'check.php',
'script': 'upload.php',
'multi': true,
'auto':true,
'simUploadLimit': 2
});
});
</script>
</head>
<body>
<input name="fileUpload" id="fileUpload" type="file" />
<a href="javascript:$('#fileUpload').fileUploadStart()">Subir</a> | <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Limpiar</a>
<input type="hidden" name="path_doc" value="">
</body>
</html>
Pero el segundo paso para almacenar el nombre del file en el campo hidden es el que me esta costando porque no se por donde tirar.
1 respuesta
Respuesta de krlosnow
1
Prueba a obtener el nombre del fichero como:
$('#fileUpload').val();
Te adelanto que el path completo no lo vas a poder obtener. Con versiones antiguas de navegadores si se podía, pero esa "feature" se ha eliminado por temas de seguridad: le estas pasando información de tu sistema de archivos al servidor, lo que puede dar pistas para que te hagan un ataque.
$('#fileUpload').val();
Te adelanto que el path completo no lo vas a poder obtener. Con versiones antiguas de navegadores si se podía, pero esa "feature" se ha eliminado por temas de seguridad: le estas pasando información de tu sistema de archivos al servidor, lo que puede dar pistas para que te hagan un ataque.
Hola de nuevo Carlos, entonces despues de acabar la funcion $("#fileUpload").fileUpload, ejecuto $('#fileUpload').val();?, tal que asi:
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploader.swf',
'cancelImg': 'cancel.png',
'folder': 'uploads/',
'buttonText': 'Seleccionar',
'checkScript': 'check.php',
'script': 'upload.php',
'multi': true,
'auto':true,
'simUploadLimit': 2
});$('#fileUpload').val();
});
¿Si fuese así? ¿Cómo podría almacenar este valor en el campo hidden que tengo yo preparado? Es que llevo 2 días con esto y m estoy desquiciando.
En cuanto al path completo no me haría falta, ya que en el hidden tenia pensado poner la ruta hasta el directorio donde se almacenan los documentos y agregarle después el nombre del documento adjunto, si es que se puede claro XD.
Quedo pendiente de tu aclaración y muchas gracias por el esfuerzo
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploader.swf',
'cancelImg': 'cancel.png',
'folder': 'uploads/',
'buttonText': 'Seleccionar',
'checkScript': 'check.php',
'script': 'upload.php',
'multi': true,
'auto':true,
'simUploadLimit': 2
});$('#fileUpload').val();
});
¿Si fuese así? ¿Cómo podría almacenar este valor en el campo hidden que tengo yo preparado? Es que llevo 2 días con esto y m estoy desquiciando.
En cuanto al path completo no me haría falta, ya que en el hidden tenia pensado poner la ruta hasta el directorio donde se almacenan los documentos y agregarle después el nombre del documento adjunto, si es que se puede claro XD.
Quedo pendiente de tu aclaración y muchas gracias por el esfuerzo
lo de $('#fileUpload'). Val(); por si solo no vale. Tienes que meter ese valor en el campo oculto. Prueba a hacer estos cambios en tus inputs:
<input name="fileUpload" id="fileUpload" type="file" onchange="cambiaFile()"/>
<input type="hidden" name="path_doc" id="path_doc" value="">
... y mete esta función javascript:
function cambiaFile(){
$('#path_doc').val($('#fileUpload').val());
alert ("El valor del campo oculto es " + $('#path_doc').val());<span style="white-space: pre;"> </span>
}
Luego me cuentas que tal.
<input name="fileUpload" id="fileUpload" type="file" onchange="cambiaFile()"/>
<input type="hidden" name="path_doc" id="path_doc" value="">
... y mete esta función javascript:
function cambiaFile(){
$('#path_doc').val($('#fileUpload').val());
alert ("El valor del campo oculto es " + $('#path_doc').val());<span style="white-space: pre;"> </span>
}
Luego me cuentas que tal.
Hola Carlos, la implementación ha quedado así:
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploader.swf',
'cancelImg': 'cancel.png',
'folder': 'uploads/',
'buttonText': 'Seleccionar',
'checkScript': 'check.php',
'script': 'upload.php',
'multi': true,
'auto':true,
'simUploadLimit': 2
});
});
function cambiaFile(){
$("#path_doc").val($("#fileUpload").val());
alert ("El valor del campo oculto es " + $("#path_doc").val());
}
</script>
</head>
<body>
<input name="fileUpload" id="fileUpload" type="file" onchange="javascript:cambiaFile()" />
<a href="javascript:$('#fileUpload').fileUploadStart()">Subir</a> | <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Limpiar</a>
<input type="hidden" name="path_doc" id="path_doc" value="">
</body>
Pero sigue sin otorgar ningún valor al campo hidden. ¿Algún error en mi implementación puede ser? Muchas gracias por tu paciencia.
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploader.swf',
'cancelImg': 'cancel.png',
'folder': 'uploads/',
'buttonText': 'Seleccionar',
'checkScript': 'check.php',
'script': 'upload.php',
'multi': true,
'auto':true,
'simUploadLimit': 2
});
});
function cambiaFile(){
$("#path_doc").val($("#fileUpload").val());
alert ("El valor del campo oculto es " + $("#path_doc").val());
}
</script>
</head>
<body>
<input name="fileUpload" id="fileUpload" type="file" onchange="javascript:cambiaFile()" />
<a href="javascript:$('#fileUpload').fileUploadStart()">Subir</a> | <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Limpiar</a>
<input type="hidden" name="path_doc" id="path_doc" value="">
</body>
Pero sigue sin otorgar ningún valor al campo hidden. ¿Algún error en mi implementación puede ser? Muchas gracias por tu paciencia.
¿Salta el alert?
Hola Carlos, no no salta ningun alert. Es como si no le hiciese caso a la función cambiarFile() pero el Firebug no me da ningún error
Puede que el uploadify esté sobrescribiendo el onchange. En vez de lanzarlo ahí, lánzalo justo antes de hacer el submit del formulario, a ver si tira.
Ya me cuentas.
Ya me cuentas.
Hola Carlos, ¿perdona pero a que t refieres de antes de hacer el submit? Lo digo porque de momento no tengo ningún form ni ningún sumit, lo único que se lanza es el uploadify y no se como hacer para recoger el nombre antes del submit. Podrías indicarme cuando ejecutar cambiarFile() ¿please?
Pues efectivamente, por lo que veo el uploadify no usa forms con submit, sino un link que lanza el método fileUploadStart(). Tendrías que tocar este link:
<a href="javascript:subirFichero()">Subir</a>
...e implementar la función, metiendo al final el código para hacer el upload:
function subirFichero(){
$('#path_doc').val($('#fileUpload').val());
alert ("El valor del campo oculto es " + $('#path_doc').val());
$('#fileUpload').fileUploadStart();
}
Venga.
<a href="javascript:subirFichero()">Subir</a>
...e implementar la función, metiendo al final el código para hacer el upload:
function subirFichero(){
$('#path_doc').val($('#fileUpload').val());
alert ("El valor del campo oculto es " + $('#path_doc').val());
$('#fileUpload').fileUploadStart();
}
Venga.
