valor de input text mal colocado

[WinderJerter]

hola que tal, lo que pasa es que me encontré con un script jquery muy bueno por la red que es para darle estilo a un input file

Código Javascript:

$.fn.si = function() {
    $.support = {
        opacity: !($.browser.msie && /MSIE 6.0/.test(navigator.userAgent))
    };
    if ($.support.opacity) {
        $(this).each(function(i) {
            if ($(this).is(":file")) {
                var $input = $(this);
                $(this).wrap('<div class="cabinet" id="cabinet'+i+'"></div>');
                $("div#cabinet"+i)
                    .wrap('<div class="si"></div>')
                    .after('<div class="uploadButton"><div></div></div><input type="text" class="selectedFile" value="" />') 
                    .live("mousemove", function(e) {
                    if (typeof e == 'undefined') e = window.event;
                    if (typeof e.pageY == 'undefined' &&  typeof e.clientX == 'number' && document.documentElement)
                    {
                        e.pageX = e.clientX + document.documentElement.scrollLeft;
                        e.pageY = e.clientY + document.documentElement.scrollTop;
                    };
                    
                    var ox = oy = 0;
                    var elem = this;
                    if (elem.offsetParent)
                    {
                        ox = elem.offsetLeft;
                        oy = elem.offsetTop;
                        while (elem = elem.offsetParent)
                        {
                            ox += elem.offsetLeft;
                            oy += elem.offsetTop;
                        };
                    };
                });
                
                $(this).change(function() {
                    $container = $(this).closest("div.si");
                    $("input.selectedFile", $container).html($(this).val());
                })
            }
        });
    }
};
 

Yo ya lo he personalizado un poco y me encontré un problema a la hora de examinar el archivo, queda mal colocado en el input, por ejemplo:

<input class="selectedFile" type="text" value="">archivo.exe</input>

he tratado de modificar el código para que el archivo examinado quede entre "" del value pero no he podido acomodarlo ni tampoco he podido quitar el </input>

Espero que me aya expresado atendible mente bien

Saludos y gracias de antemano

[hector2c]

aaaaaaam, si no fuera mucha molestia, podrias agregar el código html y el nombre del plugin que usas?

[mayid]

he tratado de modificar el código para que el archivo examinado quede entre "" del value pero no he podido acomodarlo ni tampoco he podido quitar el </input>

No entendí!

Lo que tengas en value y lo que tengas entre etiqueta debería ser lo mismo... No me refiero a repetir, sino que a la hora de accederlo desde javascript, igual daría que estuviera en un lado o en otro. Fijate en esto:

$("input.selectedFile", $container).html($(this).val());

[WinderJerter]

Iniciado por hector2c

aaaaaaam, si no fuera mucha molestia, podrias agregar el código html y el nombre del plugin que usas?

Hola que tal hector2c, claro mira lo puedes encontrar aquí

Saludos y gracias

[_Ju]

Mencionas esta linea

Iniciado por WinderJerter

<input class="selectedFile" type="text" value="">archivo.exe</input>

Pero...... se supone que es un input de tipo file no?? osea:

Código:

<input class="selectedFile" type="file" name="file" />

Y me parece que debe llamarse "file" tambien el input.

[hector2c]

aaaaaaam, bueno, segun entendi, deseas que al seleccionar un archivo, en otro input:text, aparesca el arhcivo seleccionado... cierto????

pos pos pos, abre el jquery.si.js y ubica el siguiente código

Código PHP:

  $(this).change(function() { 
    $container = $(this).closest("div.si"); 
    $("label.selectedFile", $container).html($(this).val()); 
})  
   

luego añade una linea para obtener el valor y darselo a un input:text

Código PHP:

  $(this).change(function() { 
    $container = $(this).closest("div.si"); 
    $("label.selectedFile", $container).html($(this).val()); 
    /* logicamente en mi pagina tengo un input de tipo text, con el id conejo, ahi se mostrar el valor.*/ 
    $("#conejo").val($(this).val()); 
})  
   

este es el html

Código HTML:

<input type="file" class="file" name="file" onchange="fn_mostrar();" />
<input type="text" id="conejo" /> 

suerte!

[WinderJerter]

hola que tal, agracias a todos por responder, creo que no me exprese bien , miren lo que pasa es que con el código jquery que publique en el primer post, cuando cargo un archivo lo que hace es acomodarlo de esta manera en un input text: <input class="selectedFile" type="text" value="">captcha-bg.gif</input> y obviamente esta mal, pero lo que yo necesito es que al cargar el archivo quede de esta manera por ejemplo: <input class="selectedFile" type="text" value="error.gif">; que el archivo se acomode en el value y que se elimine el </input>

Espero que esta vez si me haya expresado claro y concreto

Saludos y nuevamente gracias de antemano

[mayid]

Aqui te falta la barrita de cierre:

<input class="selectedFile" type="text" value="error.gif">

<input class="selectedFile" type="text" value="error.gif" />

Pero es MUY raro lo que estas preguntando. Si la cosa se modifica desde aca:
$("input.selectedFile", $container).html($(this).val());

... usas un debugger o como haces para decidir que la cosa está "mal posicionada"?

[WinderJerter]

Iniciado por mayid

Aqui te falta la barrita de cierre:





Pero es MUY raro lo que estas preguntando. Si la cosa se modifica desde aca:
$("input.selectedFile", $container).html($(this).val());

... usas un debugger o como haces para decidir que la cosa está "mal posicionada"?

Hola que tal mayid, utilizo el firebug

Saludos

[alblan]

Hola a todos, soy Albert el autor del plugin.

El <label class="selectedFile"> únicamente sirve para mostrar el nombre del fichero seleccionado. En el <input type="file"> que tu decidas darle estilo se cargará el fichero y cuando hagas el submit se enviará al servidor.

WinderJerter no acabo de entender porque cambias el <label class="selectedFile"> por un <input class="selectedFile">. ¿Me lo puedes explicar?

hector2c si en el código del plugin le pones $("#conejo") provoca que solo funcione para el caso que tienes un <input type="text" id="conejo" /> con lo cual pierde su gracia que es que funcione para todos los casos

Un saludo

[WinderJerter]

Iniciado por alblan

Hola a todos, soy Albert el autor del plugin.

El <label class="selectedFile"> únicamente sirve para mostrar el nombre del fichero seleccionado. En el <input type="file"> que tu decidas darle estilo se cargará el fichero y cuando hagas el submit se enviará al servidor.

WinderJerter no acabo de entender porque cambias el <label class="selectedFile"> por un <input class="selectedFile">. ¿Me lo puedes explicar?

hector2c si en el código del plugin le pones $("#conejo") provoca que solo funcione para el caso que tienes un <input type="text" id="conejo" /> con lo cual pierde su gracia que es que funcione para todos los casos

Un saludo

Hola que tal Albert, muy bien plugin , mira yo le cambie el label por el input text para que se viera como todo un file por ejemplo a si:



Y otra cosa que deseo hacerle es que el botón de examinar este a la izquierda del input text a si:



Espero que me puedas ayudar con esas dudas,,, saludos y gracias de antemano

[alblan]

WinderJerter, a ver que te parece lo que te propongo.

Yo en vez de poner un <input>, que te va a dar más trabajo ya que tendrás que controlar lo que entran en él o hacerlo readonly, conservaría el <label.selectedFile> pero dándole el mismo aspecto que un <input> (border, padding, width, colores de los bordes, etc.). De esta forma no tocas el plugin sino que adaptas el css a tus necesidades.

Para que el botón se muestre a la izquierda, hazlo desde el css así (solo pongo lo que cambia):

Código CSS:

div.si {
    float: left;
}
div.si label.cabinet {
    float: right;
}
div.si div.uploadButton {
    float: right;
}
div.si div.uploadButton div {
    left: 0;
}
div.si label.selectedFile {
    float: left;
}
 

Un saludo

[WinderJerter]

Iniciado por alblan

WinderJerter, a ver que te parece lo que te propongo.

Yo en vez de poner un <input>, que te va a dar más trabajo ya que tendrás que controlar lo que entran en él o hacerlo readonly, conservaría el <label.selectedFile> pero dándole el mismo aspecto que un <input> (border, padding, width, colores de los bordes, etc.). De esta forma no tocas el plugin sino que adaptas el css a tus necesidades.

Para que el botón se muestre a la izquierda, hazlo desde el css así (solo pongo lo que cambia):

Código CSS:

div.si {
    float: left;
}
div.si label.cabinet {
    float: right;
}
div.si div.uploadButton {
    float: right;
}
div.si div.uploadButton div {
    left: 0;
}
div.si label.selectedFile {
    float: left;
}
 

Un saludo

Okey alblan muchas gracias y deja probar eso del label haber si puedo lograr el mismo efecto que un input

saludos y gracias de antemano