Sto tentando di attivare un evento click sul tipo di input = "file" con un clic su un altro pulsante.Il clic del trigger di Jquery non funziona sui browser safari in mac, Ipad e Iphone
Demo: http://jsfiddle.net/Y85g6/
Sta funzionando bene in tutti i browser tranne il browser Safari in Mac, Ipad & Iphone.
Esiste qualche trucco per eseguire questa operazione?
Trovato un'alternativa.
Basta posizionare l'ingresso type="file" sul pulsante personalizzato posizionandolo in modo assoluto e utilizzare jQuery fadeTo('fast',0) per nasconderlo.
Ora, se si fa clic sul pulsante personalizzato, viene visualizzata la finestra del browser.
Il suo lavoro in tutti i browser desktop, ma non in iPhone & iPad in quanto non consentono di caricare qualsiasi tipo di file.
che jQuery imposta semplicemente l'opacità su 0. Il CSS è probabilmente più appropriato dell'utilizzo di un'animazione jQuery –
I browser possono essere molto schizzinosi quando si tratta di interazioni JavaScript con input di file, per motivi di sicurezza. Safari ti impedisce di attivare qualsiasi evento click su di essi. Alcune versioni di Chrome e Firefox hanno anche questa restrizione. Questo è stato previously discussed here.
Capito, non è possibile per i browser Safari di kit web, grazie per l'alternativa. –
Si prega di condividere anche altre alternative se presenti. –
È meglio usare CSS anziché JS per nascondere l'elemento perché renderà il tuo elemento nascosto direttamente.
Il seguente approccio ha fatto il trucco per me:
$(".upload_on_click").each(function(index) {
var form = $(this).next("form");
//form.hide(); /* THIS TECHNIQUE DIDN'T WORK IN SAFARI */
form.css("position", "absolute");
form.css("visibility", "hidden");
$(this).css("cursor", "pointer");
$(this).click(function() {
$('input[type="file"]', form).trigger("click");
});
$('input[type="file"]', form).change(function() {
$('input[type="submit"]', form).trigger("click");
});
});
provare a caricare lo script nel piè di pagina. Ho avuto un problema simile un paio di volte e questo ha fatto il trucco.
Non sono sicuro che qualcuno stia leggendo più questa domanda, ma recentemente ho avuto un problema simile con Safari, quindi ho pensato di condividerlo.
In primo luogo, come ceejayoz accennato, vedere la discussione qui: In JavaScript can I make a "click" event fire programmatically for a file input element?
La soluzione, quindi, se non si desidera utilizzare il posizionamento tasto, è quello di visualizzare il pulsante di input del file (rimuovere il "display: none; ") e invece lo nascondi usando" opacity: 0; ". Probabilmente vuoi anche posizionarlo in modo assoluto in modo che non interagisca con altri elementi. Ad ogni modo, in questo modo puoi comunque utilizzare JS per attivare l'inserimento di file in tutti i browser.
Invece di trigger("click") è possibile utilizzare il seguente codice che funziona con successo in tutti i browser:
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);
document.getElementById(elem_id).dispatchEvent(evt);
Solo 'initEvent()' è ora deprecato. Il 'jQuery.trigger (" click ")' ha il vantaggio di usare l'ultima interfaccia disponibile come resa disponibile ... –
rendere l'elemento visibile, come il lavoro evento trigger pretende molto su elementi nascosti in Mac safari.
ho avuto la risposta più semplice per questo
opacity : 0.01 sul vostro elemento file di input
.Click() non è supportata in Safari. Il suggerimento di Sattu dovrebbe funzionare. Ma non hai bisogno di Javascript per personalizzare il pulsante del file di input.
<label><input type="file" id="file" name="file" style="position:absolute; left:-9999px;" />Upload</label>
Riferimento: http://noypiscripter.blogspot.com/2014/04/simplest-cross-browser-custom-upload.html
sufficiente rimuovere "display: none" e utilizzare "visibility: hidden" e lavora cross browser.
possibile duplicato di [In JavaScript posso fare un evento "click" a livello di programmazione per un elemento di input del file?] (Http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a -click-event-fire-programmatically-for-a-file-input) – ceejayoz
quindi come fare una funzionalità di navigazione dei file personalizzati. –
O non farlo, o farlo con una soluzione basata su Flash come SWFUpload. – ceejayoz