diálogo de carga del archivo de desencadenamiento usando javascript/jquery

Question

, en lugar de usar <input type="file">, es posible utilizar <input type="text"> y luego guiarlo mediante javascript o jquery de modo que cuando se hace clic en el cuadro de texto, aparece el diálogo de carga de archivo ..... (y se ha subido realmente cuando se envía a un formulario)

Answer 1

Tengo la sospecha de que por razones de seguridad no podrá hacerlo. Me parece recordar hace un tiempo que intento establecer el atributo de valor de un elemento de carga de archivo que no puede hacer, ya que podría extraer archivos específicos de la computadora de un usuario sin su consentimiento. Me imagino que esto se extendería a cambiar programáticamente un cuadro de texto a un elemento de carga de archivo, ya que podría establecer el valor del campo de texto en el archivo que quería agregar, luego cambiar su tipo a un elemento de carga y enviar el formulario.

Debería ser algo bastante simple de intentar aunque creo que estás trabajando dentro de las limitaciones de Javascript y, por lo tanto, si no puedes hacerlo en JS nativo, es poco probable que puedas usar JQuery .

la esperanza que esto tenga sentido,

jlove

Answer 2

¿Quieres decir algo como esto?

http://jsfiddle.net/CSvjw/

$('input[type=text]').click(function() { 
    $('input[type=file]').trigger('click'); 
}); 

$('input[type=file]').change(function() { 
    $('input[type=text]').val($(this).val()); 
}); 

Tenga en cuenta, sin embargo, que el valor dado por el archivo de entrada es falso por razones de seguridad. Si desea que aparezca el nombre del archivo, puede recortar las barras.

Aquí hay un ejemplo de cómo hacerlo utilizando una fracción de cadena y un estallido matriz:

http://jsfiddle.net/CSvjw/1/

$('input[type=text]').click(function() { 
    $('input[type=file]').trigger('click'); 
}); 

$('input[type=file]').change(function() { 
    var vals = $(this).val(), 
     val = vals.length ? vals.split('\\').pop() : ''; 

    $('input[type=text]').val(val); 
}); 

Se puede ajustar más a fondo para dar cuenta de los sistemas que utilizan una barra inclinada como el directorio separador. También es importante tener en cuenta que si hace esto, perderá la funcionalidad de muchos navegadores modernos donde los usuarios pueden arrastrar archivos desde su computadora directamente a una entrada de archivo. Si fuera usted, abrazaría ese paradigma al diseñar la entrada del archivo en lugar de intentar convertir una entrada de texto en algo que no es.

Answer 3

no uso display:none o visibility:hidden inicialmente en el css

En Jquery:

$(document).ready(function() { 
$('#file').hide(); 
$("#elementToBeClicked").click(function(){ 
    $('#file').click(); 
}); 
}); 

Answer 4

Y si el código HTML dispone de varias entradas idénticas como ésta a continuación: -

<div class="item"> 
<input type="text" /> 
<input type="file" /> 
</div> 
<div class="item"> 
<input type="text" /> 
<input type="file" /> 
</div>​​​​​​​​​​​​​​​​​​​​​ 

Ampliando la respuesta de @ treeface, el código de Jquery (versión actual 1.8.0) sería:

$('input[type=text]').click(function() { 
    $(this).parent(".item") 
     .find('input[type=file]') 
     .trigger('click'); 
}); 

$('input[type=file]').change(function() { 
    $(this).parent(".item") 
     .find('input[type=text]') 
     .val($(this).val()); 
});​ 

Tome nota entre $ parents() y $ parent() en jQuery.Probarlo @http://jsfiddle.net/afxDC/

Answer 5

creo que se puede unir el texto de entrada a un jQuery/javascript función que va a crear un archivo de entrada con el código y el usuario ahora puede cargar un archivo

<input type="text" onclick="upload"/> 
jquery 
function upload(){ 
    $('[input type='text']').append('<input type="file"/>')