Input del file trigger di Jquery

Sto cercando di triggersre una casella di caricamento (pulsante Sfoglia) utilizzando jQuery.
Il metodo che ho provato ora è:

$('#fileinput').trigger('click'); 

Ma non sembra funzionare. Per favore aiuto. Grazie.

Ciò è dovuto a una restrizione di sicurezza.

Ho scoperto che la restrizione di sicurezza è solo quando il è impostato per la display:none; o è visbilty:hidden .

Così ho provato a posizionarlo al di fuori del viewport impostando position:absolute e top:-100px; e voilà funziona.

vedi http://jsfiddle.net/DSARd/1/

chiamalo un hack

Spero che funzioni per te.

questo ha funzionato per me:

JS:

 $('#fileinput').trigger('click'); 

HTML:

 

CSS:

 .hiddenfile { width: 0px; height: 0px; overflow: hidden; } 

>>> Un altro che funziona Cross-Browser: <<<

L’idea è quella di sovrapporre un pulsante “Sfoglia” enorme e invisibile al tuo pulsante personalizzato. Quindi, quando l’utente fa clic sul pulsante personalizzato, in realtà fa clic sul pulsante “Sfoglia” del campo di input nativo.

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

 
Click Me!

CSS:

 div#mybutton { /* IMPORTANT STUFF */ overflow: hidden; position: relative; /* SOME STYLING */ width: 50px; height: 28px; border: 1px solid green; font-weight: bold background: red; } div#mybutton:hover { background: green; } input#myfile { height: 30px; cursor: pointer; position: absolute; top: 0px; right: 0px; font-size: 100px; z-index: 2; opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */ filter: alpha(opacity=0); /* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -khtml-opacity: 0.0; /* Safari 1.x */ -moz-opacity: 0.0; /* FF lt 1.5, Netscape */ } 

JavaScript:

 $(document).ready(function() { $('#myfile').change(function(evt) { alert($(this).val()); }); }); 

Puoi usare l’elemento LABEL ex.

 
//

Questo attiverà il file di input

Ho funzionato (= testato) in IE8 +, recente FF e chrome:

 $('#uploadInput').focus().trigger('click'); 

La chiave si sta concentrando prima di triggersre il clic (altrimenti Chrome lo ignora).

Nota: è necessario che l’input sia visualizzato e visibile (come in, non display:none e non visibility:hidden ). Suggerisco (come molti altri hanno prima) di posizionare in modo assoluto l’input e buttarlo fuori dallo schermo.

 #uploadInput { position: absolute; left: -9999px; } 

Guarda il mio violino.

http://jsfiddle.net/mohany2712/vaw8k/

 .uploadFile { visibility: hidden; } #uploadIcon { cursor: pointer; } 
  

adardesign lo ha inchiodato per quanto riguarda l’elemento di input del file che viene ignorato quando è nascosto. Ho notato anche che molte persone spostano la dimensione dell’elemento a 0 o la spingono fuori limite con le regolazioni di posizionamento e di sfioro. Queste sono tutte grandi idee.
Un modo alternativo che sembra funzionare perfettamente è semplicemente impostare l’opacità su 0 . Quindi puoi sempre impostare la posizione in modo che non possa compensare altri elementi come fa hide. Sembra un po ‘inutile spostare un elemento di quasi 10K pixel in qualsiasi direzione.

Ecco un piccolo esempio per chi ne vuole uno:

 input[type='file']{ position:absolute; opacity:0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */ filter: alpha(opacity=0); } 

Codice corretto:

  

Solo per curiosità, puoi fare qualcosa come vuoi creando dynamicmente un modulo di caricamento e un file di input, senza aggiungerlo all’albero DOM:

 $('.your-button').on('click', function() { var uploadForm = document.createElement('form'); var fileInput = uploadForm.appendChild(document.createElement('input')); fileInput.type = 'file'; fileInput.name = 'images'; fileInput.multiple = true; fileInput.click(); }); 

Non c’è bisogno di aggiungere il uploadForm al DOM.

Questo è fatto apposta e in base alla progettazione. È un problema di sicurezza.

Sono riuscito con un semplice $ (…). Click (); con JQuery 1.6.1

È troppo tardi per rispondere, ma penso che questa configurazione minima funzioni meglio. Sto anche cercando lo stesso.

  
Select your new picture

// css

 .btn-file { display: inline-block; padding: 8px 12px; cursor: pointer; background: #89f; color: #345; position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; filter: alpha(opacity=0); opacity: 0; cursor: inherit; display: block; } 

jsbin

pulsanti di input del file di bootstrap demo

In realtà, ho scoperto un metodo davvero semplice per questo, che è:

 $('#fileinput').show().trigger('click').hide(); 

In questo modo, il campo di input del tuo file può avere la proprietà css visualizzata su none e continua a vincere lo scambio 🙂

oppure semplicemente

 $(':input[type="file"]').show().click().hide(); 

Questa è una domanda molto vecchia, ma sfortunatamente questo problema è ancora rilevante e richiede una soluzione.

La soluzione (sorprendentemente semplice) che ho trovato è quella di “hide” il vero campo di input del file e avvolgerlo con un tag LABEL (può essere basato su Bootstrap e HTML5, per il miglioramento).

See here: codice di esempio qui

In questo modo, il campo di input del file reale è invisibile e tutto ciò che vedi è il “pulsante” personalizzato che in realtà è un elemento LABEL modificato. Quando fai clic su questo elemento LABEL, viene visualizzata la finestra per la selezione di un file e il file scelto verrà inserito nel campo di input del file reale.

Inoltre, è ansible modificare l’aspetto e il comportamento come desiderato (ad esempio: ottenere il nome del file selezionato dal file di input del file, dopo averlo selezionato e mostrarlo da qualche parte. L’elemento LABEL non lo fa automaticamente, naturalmente, di solito lo inserisco nell’ETICHETTA, come contenuto di testo).

Attenzione però! La manipolazione dell’aspetto e del comportamento di questo è limitata a qualsiasi cosa tu possa immaginare e pensare. 😉 😉

ho avuto problemi con la validazione lato client personalizzata per mentre utilizzavo un pulsante falso per triggersrlo e la soluzione di @Guillaume Bodi ha funzionato per me (anche con opacity: 0; su chrome)

 $("#MyForm").on("click", "#fake-button", function () { $("#uploadInput").focus().trigger("click"); }); 

e stile CSS per l’input di caricamento

 #uploadInput { opacity: 0.0; filter: alpha(opacity=0); /* IE lt 8 */ -ms-filter: "alpha(opacity=0)"; /* IE 8 */ -khtml-opacity: 0.0; /* Safari 1.x */ -moz-opacity: 0.0; } 

Prova questo, è un hack. la Posizione: absolute è per Chrome e trigger (‘change’) è per IE.

 var hiddenFile = $(""); $('body').append(hiddenFile); $('#aPhotoUpload').click(function () { hiddenFile.trigger('click'); if ($.browser.msie) hiddenFile.trigger('change'); }); hiddenFile.change(function (e) { alert('TODO'); }); 

Il mio problema era leggermente diverso su iOS 7. Scopriamo che FastClick stava causando problemi. Tutto quello che dovevo fare era aggiungere class="needsclick" al mio pulsante.

Questa è probabilmente la migliore risposta, tenendo presente i problemi del browser incrociato.

CSS:

 #file { opacity: 0; width: 1px; height: 1px; } 

JS:

 $(".file-upload").on('click',function(){ $("[name='file']").click(); }); 

HTML:

 Upload  

Sulla base della risposta di Guillaume Bodi, ho fatto questo:

 $('.fileinputbar-button').on('click', function() { $('article.project_files > header, article.upload').show(); $('article.project_files > header, article.upload header').addClass('active'); $('.file_content, article.upload .content').show(); $('.fileinput-button input').focus().click(); $('.fileinput-button').hide(); }); 

il che significa che è nascosto per iniziare e quindi visualizzato per il trigger, quindi nascosto di nuovo immediatamente.