input del file di trigger jQuery

163

Sto cercando di attivare 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.

javascript  jquery  css 
— Alec Smart
fonte
Si può provare qualcosa di simile a questo , invece.
— Kirtan,
19
Non c'è modo di farlo? Che deprimente.
— Marcus Downing,
Deprimere davvero, ed è innescato dal "clic", sul serio? Preferisco di gran lunga Flash / AS3, con la sua API ristretta e un forte modello di sicurezza che consente di chiamare FileReference.browse solo da un gestore di eventi di input avviato dall'utente. Inoltre, l'input di file HTML è brutto e non stylable (è solo un tag di input, così tanto per la separazione di contenuti e stile), quindi devi creare un nuovo pulsante 'Sfoglia', che è anche attivato da un evento click ... che devi inoltrare all'input del file come un clic ... che può portare a una ricorsione infinita a seconda del posizionamento degli elementi e della specificità della delega degli eventi.
— Triynko,
Sfortunatamente, l'utilizzo di Flash sta diventando sempre meno praticabile, dati i suoi costanti problemi di sicurezza e l'aumento dei blocchi di contenuti.
— Tim

Risposte:

195

Ciò è dovuto a una limitazione della sicurezza.

Ho scoperto che la limitazione di sicurezza è solo quando <input type="file"/>è impostata su display:none;o è visbilty:hidden.

Così ho provato posizionandolo al di fuori della finestra impostando position:absoluteed top:-100px;e voilà funziona.

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

chiamalo un hack.

Spero che funzioni per te

— adardesign
fonte
4
non funziona in ff 3.6. funziona in Chrome e anche in ie 8 però :)
— AyKarsi,
4
Esiste documentazione su msdn sulla limitazione di sicurezza?
— eomeroff,
2
Funziona alla grande. In ogni caso penso che sia più sicuro impostare a left: -100px;. Non si sa mai quanto potrebbe durare una pagina
— Alter Lagos,
+1 Questa è la vera risposta (e una buona soluzione). Qualcuno avrebbe un link alla documentazione in cui questo è esplicitamente dichiarato?
— Kontur,
9
puoi anche impostare l'opacità su 0
— Stuart
109

questo ha funzionato per me:

JS:

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

HTML:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS:

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

>>> Un altro che funziona su più browser: <<<

L'idea è quella di sovrapporre un enorme pulsante "Sfoglia" invisibile sopra il pulsante personalizzato. Pertanto, quando l'utente fa clic sul pulsante personalizzato, in realtà sta facendo clic sul pulsante "Sfoglia" del campo di input nativo.

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

HTML:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

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());
    });
});
— slitta
fonte
C'è un difetto, se si allarga il pulsante, quindi in IE9 / 10 il pulsante di caricamento invisibile è costituito dal pulsante destro e da un campo di testo sinistro. Su questo devi fare doppio clic. In questo caso, prova a impostare una dimensione del carattere ancora maggiore di 100 px;
— yunzen,
Funziona anche con Chrome 53. Tuttavia, heightsi suggerisce di passare aheight: 100%
— Raptor
Il secondo funziona anche in Safari su iOS. Molto bella!
— Jannis,
71

È possibile utilizzare l'elemento LABEL ex.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>
Espandi frammento

Ciò attiverà il file di input

— Jhon Rey
fonte
5
Perché questa non è la risposta accettata? È il modo più semplice che non richiede javascript funky.
— Tomitrescak,
@tomitrescak l'OP non è in attesa di ottenere la risposta migliore.
— Mahi,
9
Tieni presente che la risposta è stata pubblicata 7 anni dopo l'invio della domanda.
1
Anche la migliore risposta nel 2018.
— masoomyf,
1
Migliore risposta anche per il 2019;)
— guillaumepotier,
17

Ho funzionato (= testato) in IE8 +, FF e Chrome recenti:

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

La chiave si sta focalizzando prima di sparare (altrimenti Chrome lo ignora).

Nota: è NECESSARIO che gli input siano visualizzati e visibili (come in, non display:nonee non visibility:hidden). Suggerisco (come molti altri prima) di posizionare assolutamente l'input e di buttarlo fuori dallo schermo.

#uploadInput {
    position: absolute;
    left: -9999px;
}
— The Mighty Rubber Duck
fonte
1
+1 per quello. Ho anche notato che puoi nascondere l'elemento circostante ma non il pulsante di input del file, quindi mostrare l'elemento circostante, mettere a fuoco il pulsante, attivarlo, quindi nascondere il pulsante.
— Stevo,
10

Dai un'occhiata al mio violino.

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

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}
<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>
Espandi frammento

— Mohan
fonte
9

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

Ecco un piccolo esempio per coloro che ne vogliono 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);
}
— eyegropram
fonte
7

Solo per motivi di curiosità, puoi fare qualcosa come vuoi creando dinamicamente 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 è necessario aggiungere uploadForm al DOM.

— jairhumberto
fonte
1
GRAZIE! Lo cerco da 20 minuti!
— Labo,
5

Codice corretto:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        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);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>
— E9 Sistemas
fonte
4

Questo è di proposito e di progettazione. È un problema di sicurezza.

— Chad Grant
fonte
4

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

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

In questo modo, il campo di input del file può avere la proprietà css visualizzata su nessuno e comunque vincere lo scambio :)

— skywlkr
fonte
potrebbe scorrere sullo schermo della macchina più lenta. Non è una soluzione ottimale
— Dmitry Efimenko
4

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

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// 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

demo dei pulsanti di input del file bootstrap

— Natwar Singh
fonte
non è mai
— troppo
Pochi anni dopo ancora meglio rispondere IMO
— DimmuR
4

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

La soluzione (sorprendentemente semplice) che ho escogitato è quella di "nascondere" il campo di input del file effettivo e di avvolgerlo con un tag LABEL (può essere basato su Bootstrap e HTML5, per migliorare).

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 si fa clic su questo elemento LABEL, viene visualizzata la finestra per la selezione di un file e il file scelto andrà nel campo di input del file reale.

Inoltre, puoi manipolare l'aspetto e il comportamento come desideri (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, ovviamente, di solito lo metto solo all'interno dell'ETICHETTA, come contenuto testuale).

Attenzione però! La manipolazione dell'aspetto e del comportamento di questo è limitata a qualsiasi cosa tu possa immaginare e pensare. ;-) ;-)

— TheCuBeMan
fonte
3

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

— Valentin Galea
fonte
1
Hmm curioso di come l'hai fatto, sul mio sito Web (www.iscriptdesign.com) facendo $ ('file: input'). Click () non fa nulla, né $ ('file: input'). Trigger (' clic');
— dr jerry,
Ecco l'esempio completo: <input type = "file" id = "picBrowse" ... e poi $ ('# picBrowse'). Click ();
— Valentin Galea,
Ho provato su cr (non so quale versione) su mac os, funziona su FF 4 su XP. Grazie!
— dr jerry,
3

oppure semplicemente

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

ho avuto problemi con la convalida lato client personalizzata <input type="file"/>durante l'utilizzo di un pulsante falso per attivarlo 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 upload 

#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;
}
— Amin K
fonte
1

Prova questo, è un trucco. Posizione: assoluto è per Chrome e trigger ("modifica") è per IE.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});
— thinpiglin
fonte
Si noti che $.browserè deprecato nelle versioni più recenti di jQuery
— Kevin Beal,
1

Il mio problema era un po 'diverso su iOS 7. Sembra che FastClick stia causando problemi. Tutto quello che dovevo fare era aggiungere class="needsclick"al mio pulsante.

— Dex
fonte
0

Questa è probabilmente la risposta migliore, 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:

<a class="file-upload">Upload</a>
<input type="file" name="file">
— Eddsters
fonte
0

Penso di capire il tuo problema, perché ne ho uno simile. Quindi il tag <label>ha l'attributo per, puoi usare questo attributo per collegare il tuo input con type = "file". Ma se non vuoi attivarlo usando questa etichetta perché alcune regole del tuo layout, puoi fare così.

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});
.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>
Espandi frammento

Naturalmente lo adatterai per il tuo scopo e layout, ma è il modo più semplice che conosco per farlo funzionare !!

— Leonardo Lindroth
fonte
-1

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 cominciare e quindi visualizzato per il trigger, quindi nascosto di nuovo immediatamente.

— Stevo
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.