Finestra di dialogo Apri file in JavaScript


109

Ho bisogno di una soluzione per visualizzare la finestra di dialogo Apri file in HTML mentre faccio clic su un file div. La finestra di dialogo Apri file deve aprirsi quando si divfa clic su.

Non voglio visualizzare la casella del file di input come parte della pagina HTML. Deve essere visualizzato in una finestra di dialogo separata, che non fa parte della pagina web.


4
Un avviso non è una finestra di dialogo di file? - Puoi chiarire cosa stai chiedendo?
LiamB

3
Penso che stia dicendo che vuole il popup standard "file aperto"
Valentin Rocher

1
ho bisogno di aprire la finestra di dialogo del file quando si fa clic su un div. deve essere come un avviso che non fa parte della pagina web
ArK

Risposte:


52

Eccone uno carino

Fine demo di Uploader

È un <input type='file' />controllo stesso. Ma un div viene posizionato sopra e gli stili CSS vengono applicati per ottenere quella sensazione. L'opacità del controllo file è impostata su 0 in modo che sembri che la finestra di dialogo venga aperta quando si fa clic sul div.


1
c'è un modo per controllare i file visualizzati da javascript ... diciamo che volevo aprire la finestra di dialogo del file e volevo solo l'estensione del file con .pdf da visualizzare ..
Ajax3.14

1
@ Ajax3.14 i nuovi browser hanno l'oggetto FileReader, i vecchi browser devi usare il valore e cercare l'estensione del file.
Vicario

2
@ Ajax3.14 Non è necessario utilizzare FileReader o analizzare le estensioni. Molti browser supportano l'attributo accept sugli input di file. Ciò consente di limitare i tipi di file visualizzati nella finestra di dialogo del browser dei file. Fine Uploader fornisce l'accesso a questa funzionalità tramite la proprietà acceptFiles dell'opzione di convalida. Vedere la sezione di convalida della documentazione delle opzioni per maggiori dettagli. Tieni presente che l'attributo accept non è supportato in IE9 o versioni precedenti.
Ray Nicholus

1
come mai va bene? questa è una buona pratica? non dovrebbe essere qualcosa del genere: stackoverflow.com/a/18659941/915865 ?
Kat Lim Ruiz,

1
@KatLimRuiz No, la risposta a cui ti sei collegato non è una buona soluzione. Ciò farà sì che IE generi un errore se finisci per inviare il modulo associato anche a livello di programmazione.
Ray Nicholus

77

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

per IE aggiungi questo:

$("#logo").css('filter','alpha(opacity = 0');

3
Perché restituisci false nel gestore dei clic #select_logo?
Sethish

4
Non produrrebbe un errore 404, proverebbe semplicemente a navigare alla pagina corrente, con il # aggiunto alla fine. Il che farebbe saltare la pagina all'inizio. Quindi è bello essere lì, solo per un motivo diverso :)
manavo il

3
Anche se non l'ho testato abbastanza, "visibilità: nascosto;" sembra più compatibile. Inoltre, nonostante l'opacità: 0 un evento click si attiverà se l'elemento "invisibile" ha cliccato, mentre la visibilità: nascosto no.
Aron

MDN indica che document.getElementById("logo").click()è sufficiente. Mostrano anche un altro modo "Drag & Drop". developer.mozilla.org/en-US/docs/Web/API/File/…
Eric,

2
Dovresti convertirlo in Javascript normale, JQuery non è logico da usare su un progetto così piccolo ^ _ ^
Mister SirCode

57

Non so perché nessuno l'abbia segnalato, ma ecco un modo per farlo senza Javascript ed è anche compatibile con qualsiasi browser.


EDIT: in Safari, inputviene disabilitato quando nascosto con display: none. Un approccio migliore sarebbe quello di utilizzare position: fixed; top: -100em.


<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

Se preferisci puoi andare nel "modo corretto" utilizzando fornel labelpuntamento iddell'ingresso in questo modo:

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

4
funziona come un fascino, tuttavia, ecco alcuni consigli: 1. il <input>tag dovrebbe avere un nameattributo; 2. se forviene specificato l'attributo, <input>il tag del file richiederà un file id.
Raptor

5
Simplicity is the ultimate sophistication
ncubica

2
grande! funziona come un fascino anche con un'immagine di sfondo o facendo in modo che l'etichetta riceva un clic attivato da javascript. Grazie!
Leo Nomdedeu

2
A proposito, qualcuno ha indicato un problema con questa soluzione, in Safari, gli input nascosti con display: nonesono disabilitati. La soluzione alternativa consiste nell'usare un approccio diverso per nascondere l'input. Aggiornerò la risposta per riflettere questo.
JP de la Torre

1
@JPdelaTorre Sarebbe molto meglio se usassi l'opacità: 0 invece per nascondere l'input.
Adrian

39

In realtà, non hai bisogno di tutta quella roba con opacità, visibilità, <input>stile, ecc. Dai un'occhiata:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

Demo su jsFiddle . Testato in Chrome 30.0 e Firefox 24.0. Tuttavia, non funzionava in Opera 12.16.


3
Questa dovrebbe essere la risposta corretta. Per la pura implementazione Javascript, non è necessario modificare alcun codice HTML.
Zhang Buzz

21
Domanda sciocca, ma come vorresti ottenere il file scelto dopo?
Jay Wick

2
Questa è una soluzione pericolosa che potrebbe causare problemi imprevisti. Ad esempio, alcuni browser (come IE) potrebbero impedire l'invio di un modulo a livello di codice se l'input del file viene aperto anche a livello di codice. Il modo migliore per risolvere questo problema è con CSS, non JavaScript.
Ray Nicholus

3
@Charleston Sfortunatamente, non funziona in alcuni browser. Dovrebbero farlo funzionare però :)
Tigran Saluev

3
A partire dal 2020, questa soluzione sembra la più bella. Testato su BrowserStack in Edge, Safari, Opera, Firefox e Chrome. Funziona in tutti loro.
V. Rubinetti

14

Questo è ciò che ha funzionato meglio per me (testato su IE8, FF, Chrome, Safari).

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}
<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

Spiegazione: ho posizionato l'input del file direttamente sopra l'elemento su cui fare clic, in modo che qualsiasi clic verrebbe su di esso o sulla sua etichetta (che apre la finestra di dialogo di caricamento proprio come se si facesse clic sull'etichetta stessa). Ho avuto alcuni problemi con la parte del pulsante dell'input predefinito che sporgeva dal lato dell'etichetta, quindi overflow: hiddensull'input e display: inline-blocksull'etichetta erano necessari.


1
Massimizza l'input e imposta l'opacità su zero. Funziona benissimo!
Kinorsi

13

Cosa succede se JavaScript è disattivato sulla macchina del client? Utilizzare la seguente soluzione per tutti gli scenari. Non hai nemmeno bisogno di javascript / jQuery. :

HTML

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

CSS

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

Spiegazione : for="Your input Id" . Attiva l'evento clic per impostazione predefinita tramite HTML. Quindi per impostazione predefinita attiva l'evento clic, senza bisogno di jQuery / javascript. Se è fatto semplicemente da HTML perché usare jQuery / jScript? E non puoi dire se il client ha disabilitato JS. La tua funzione dovrebbe funzionare anche se JS è disattivato.

JsFiddle funzionante (non hai bisogno di JS, jquery)


3
Perché lo sfondo?
Solomon Ucko

12

Per prima cosa aggiungi i tag head :

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

se hai già script tag di , aggiungi semplicemente queste funzioni sopra.

Nel tuo corpo o tag del modulo aggiungendo:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

Non importa dove nel tuo html, è proprio così che hai creato una nuova istanza di tipo OpenFileDialog class come variabile globale , il cui nome è l' id dell'elemento, non importa dove nel tuo codice o xaml, ma nel tuo script o codice , non puoi digitare il suo nome e poi leggere una proprietà o chiamare una funzione, perché ci sono funzioni globali che fanno quelle che non sono definite nell'elemento input type = "file". Devi solo dare a queste funzioni l'id del tipo di input nascosto = "file" che è il nome dell'istanza di OpenFileDialog come stringa.

Per semplificarti la vita nella creazione di istanze di finestre di dialogo di file aperti nel tuo html, puoi creare una funzione che lo fa:

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

e se desideri rimuovere la finestra di dialogo Apri file, puoi creare e utilizzare la seguente funzione:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

ma prima di rimuovere la finestra di dialogo Apri file, assicurati che esista creando e utilizzando la seguente funzione:

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

e se non vuoi creare e aggiungere le finestre di dialogo del file aperto nel corpo o i tag del modulo nell'html, perché questo significa aggiungere un input nascosto type = "file" s, puoi farlo nello script usando la funzione di creazione sopra :

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

Assicurati che vicino al tuo corpo o ai tag del modulo, hai aggiunto:

onload="yourBodyOrFormId_onload()"

Non devi fare questa riga sopra, se l'hai già fatto.

SUGGERIMENTO: puoi aggiungere al tuo progetto o sito web un nuovo file JScript, se non lo hai ancora, e in questo file puoi mettere tutte le funzioni di dialogo del file aperto lontano dai tag script e dalla pagina html o modulo web, e utilizzare loro nella tua pagina html o modulo web da questo file JScript, ma non dimenticare prima di collegare la pagina html o modulo web al file JScript ovviamente. Puoi farlo semplicemente trascinando il file JScript sulla tua pagina html nel file testatag. Se la tua pagina è un modulo web e non un semplice HTML e non hai tag head, mettila ovunque in modo che possa funzionare. Non dimenticare di definire la variabile globale in quel file JScript, il cui valore sarà il tuo corpo o l'id del modulo come stringa. Dopo aver collegato il file JScript alla tua pagina html o modulo web, puoi caricare l'evento del tuo corpo del modulo, impostare il valore di quella variabile sul tuo corpo o ID modulo. Quindi nel file JScript, non devi più dare al documento l'id del corpo o il modulo di una pagina, basta dargli il valore di quella variabile. Puoi chiamare quella variabile bodyId o formId o bodyOrFormId o qualsiasi altro nome che desideri.

Buona fortuna ragazzo!


1
È meglio non modificare direttamente il codice innerHTML.
Solomon Ucko

9

Il modo più semplice:

#file-input {
  display: none;
}
<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

Ciò che è importante, l'uso di display: nonegarantisce che nessun posto sarà occupato dall'input del file nascosto (cosa succede usando opacity: 0).



2

L'unico inconveniente <input type="file">è l'incorporamento di un filmato flash trasparente sul div. È quindi possibile utilizzare un evento clic generato dall'utente (conforme alle nuove regole di sicurezza di Flash 10) per attivare una chiamata a FileReference.browse di flash .

Offre un'ulteriore dipendenza dal modo bizzarro, ma in cambio si ottengono molti più eventi (come eventi di avanzamento incorporati).


-1

Può usare

$('<input type="file" />').click()

nel mio caso, questo provoca un reindirizzamento automatico alla stessa pagina in cui si è verificato l'evento di clic originale, facendo ricaricare l'intera pagina e perdere tutti i dati precedentemente inseriti nella pagina.
Muntasir
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.