Öffnen Sie das Dateidialogfeld in JavaScript


108

Ich benötige eine Lösung, um den Dialog mit geöffneten Dateien in HTML anzuzeigen, während Sie auf a klicken div. Das Dialogfeld Datei öffnen muss geöffnet werden, wenn auf divgeklickt wird.

Ich möchte das Eingabefeld nicht als Teil der HTML-Seite anzeigen. Es muss in einem separaten Dialogfeld angezeigt werden, das nicht Teil der Webseite ist.


4
Eine Warnung ist kein Dateidialog? - Können Sie klarstellen, was Sie fragen?
LiamB

3
Ich denke, er sagt, er will das Standard-Popup "Open File"
Valentin Rocher

1
Ich brauche ein Dialogfeld zum Öffnen einer Datei, wenn auf ein Div geklickt wird. Es muss wie eine Warnung sein, die nicht Teil der Webseite ist
ArK

Antworten:


50

Hier ist eine schöne

Feine Uploader-Demo

Es ist eine <input type='file' />Kontrolle selbst. Aber darüber wird ein Div platziert und CSS-Stile werden angewendet, um dieses Gefühl zu bekommen. Die Deckkraft des Dateisteuerelements wird auf 0 gesetzt, sodass das Dialogfenster beim Klicken auf das Div angezeigt wird.


1
Gibt

1
@ Ajax3.14 Neue Browser haben das FileReader-Objekt, alte Browser müssen Sie den Wert verwenden und nach der Dateierweiterung suchen.
Vicary

2
@ Ajax3.14 Es ist nicht erforderlich, FileReader oder Analyseerweiterungen zu verwenden. Viele Browser unterstützen das Attribut accept für Dateieingaben. Auf diese Weise können Sie die im Dateibrowser-Dialogfeld angezeigten Dateitypen einschränken. Fine Uploader bietet Zugriff auf diese Funktionalität über die acceptFiles-Eigenschaft der Validierungsoption. Weitere Informationen finden Sie im Validierungsabschnitt der Optionsdokumentation . Beachten Sie, dass das Attribut accept in IE9 oder früher nicht unterstützt wird.
Ray Nicholus

1
Wieso ist das gut? das ist überhaupt eine gute Praxis? sollte nicht so etwas sein: stackoverflow.com/a/18659941/915865 ?
Kat Lim Ruiz

1
@KatLimRuiz Nein, die Antwort, auf die Sie verlinkt haben, ist keine gute Lösung. Dies führt dazu, dass der IE einen Fehler auslöst, wenn Sie das zugehörige Formular auch programmgesteuert senden.
Ray Nicholus

76

    $("#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">

für IE fügen Sie Folgendes hinzu:

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

3
Warum geben Sie im Click-Handler #select_logo false zurück?
Sethish

4
Es würde keinen 404-Fehler erzeugen, sondern nur versuchen, zur aktuellen Seite zu navigieren, wobei das # am Ende hinzugefügt wird. Dadurch würde die Seite nach oben springen. Es ist also gut, dort zu sein, nur aus einem anderen Grund :)
Manavo

3
Obwohl ich es nicht genug getestet habe, "Sichtbarkeit: versteckt;" scheint kompatibler. Außerdem wird trotz der Deckkraft: 0 ein Klickereignis ausgelöst, wenn auf das "unsichtbare" Element geklickt wird, während "Sichtbarkeit: Ausgeblendet" nicht ausgelöst wird.
Aron

MDN zeigt an, dass dies document.getElementById("logo").click()ausreicht. Sie zeigen auch einen anderen Weg "Drag & Drop". developer.mozilla.org/en-US/docs/Web/API/File/…
Eric

2
Sie sollten dies in normales Javascript konvertieren. JQuery ist nicht logisch für ein so kleines Projekt. ^ _ ^
Mister SirCode

57

Ich weiß nicht, warum niemand darauf hingewiesen hat, aber hier ist eine Möglichkeit, dies ohne Javascript zu tun, und es ist auch mit jedem Browser kompatibel.


BEARBEITEN: In Safari wird das inputdeaktiviert, wenn es mit ausgeblendet wird display: none. Ein besserer Ansatz wäre zu verwenden position: fixed; top: -100em.


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

Wenn Sie möchten , können Sie das gehen „richtige Weg“ durch den Einsatz forin der Unter labelHinweis auf die idvon der Eingabe wie folgt aus :

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

4
Dies funktioniert wie Charme. Hier sind jedoch einige Empfehlungen: 1. Das <input>Tag sollte ein nameAttribut haben. 2. Wenn ein forAttribut angegeben ist, <input>erfordert das Datei-Tag a id.
Raptor

5
Simplicity is the ultimate sophistication
Ncubica

2
großartig! Es funktioniert wie ein Zauber, selbst wenn ein Hintergrundbild angezeigt wird oder wenn das Etikett ein durch Klick-Javascript ausgelöst wird. Vielen Dank!
Leo Nomdedeu

2
Übrigens hat jemand mit dieser Lösung auf einen Haken hingewiesen. In Safari sind Eingaben, mit display: nonedenen versteckt ist, deaktiviert. Die Problemumgehung verwendet einen anderen Ansatz, um die Eingabe auszublenden. Ich werde die Antwort aktualisieren, um dies widerzuspiegeln.
JP de la Torre

1
@JPdelaTorre Es wäre viel besser, wenn Sie stattdessen die Deckkraft 0 verwenden würden, um die Eingabe auszublenden.
Adrian

39

Eigentlich brauchen Sie nicht all das Zeug mit Deckkraft, Sichtbarkeit, <input>Styling usw. Schauen Sie einfach mal rein:

<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 auf jsFiddle . Getestet in Chrome 30.0 und Firefox 24.0. Funktionierte jedoch nicht in Opera 12.16.


3
Dies sollte die richtige Antwort sein. Für eine reine Javascript-Implementierung müssen Sie keinen HTML-Code ändern.
Zhang Buzz

21
Dumme Frage, aber wie würden Sie die ausgewählte Datei danach bekommen?
Jay Wick

2
Dies ist eine gefährliche Lösung, die zu unerwarteten Problemen führen kann. Beispielsweise können einige Browser (z. B. IE) das Senden eines programmatischen Formulars verhindern, wenn die Dateieingabe auch programmgesteuert geöffnet wird. Der beste Weg, um dieses Problem zu lösen, ist mit CSS, nicht mit JavaScript.
Ray Nicholus

3
@Charleston Leider funktioniert es in einigen Browsern nicht. Sie sollten es aber funktionieren lassen :)
Tigran Saluev

3
Ab 2020 scheint diese Lösung die schönste zu sein. Getestet auf BrowserStack in Edge, Safari, Opera, Firefox und Chrome. Funktioniert in allen.
V. Rubinetti

14

Dies hat bei mir am besten funktioniert (Getestet auf 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>

Erläuterung: Ich habe die Dateieingabe direkt über dem zu klickenden Element positioniert, sodass Klicks entweder darauf oder auf dessen Beschriftung landen (wodurch der Upload-Dialog aufgerufen wird, als ob Sie auf die Beschriftung selbst geklickt hätten). Ich hatte einige Probleme mit dem Schaltflächenteil der Standardeingabe, der aus der Seite des Etiketts herausragt, sodass overflow: hiddendie Eingabe und display: inline-blockdas Etikett erforderlich waren.


1
Maximieren Sie die Eingabe und setzen Sie die Deckkraft auf Null. Das funktioniert super!
Kinorsi

13

Was ist, wenn Javascript auf dem Client-Computer deaktiviert ist? Verwenden Sie für alle Szenarien die folgende Lösung. Sie brauchen nicht einmal 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;
}

Erklärung : for="Your input Id". Löst standardmäßig ein Klickereignis aus. Daher wird standardmäßig ein Klickereignis ausgelöst, ohne dass jQuery / Javascript erforderlich ist. Wenn es einfach per HTML gemacht wird, warum jQuery / jScript verwenden? Und Sie können nicht sagen, ob der Client JS deaktiviert hat. Ihre Funktion sollte funktionieren, obwohl JS deaktiviert ist.

Arbeiten jsFiddle (Sie brauchen kein JS, jquery)


3
Warum der Hintergrund?
Solomon Ucko

12

Fügen Sie zuerst die Kopf- Tags hinzu:

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

wenn Sie bereits ein Skript haben Tags haben, fügen einfach diese Funktionen oben hinzu.

In Ihrem Körper oder Formular Tags hinzufügen:

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

Egal wo in Ihrem HTML, es ist einfach so, dass Sie eine neue Instanz vom Typ OpenFileDialog als globale Variable erstellt haben, deren Name die ID des Elements ist, egal wo in Ihrem Code oder xaml, sondern in Ihrem Skript oder Code Sie können seinen Namen nicht eingeben und dann eine Eigenschaft lesen oder eine Funktion aufrufen, da es globale Funktionen gibt, die diejenigen ausführen, die nicht im Element input type = "file" definiert sind. Sie müssen diesen Funktionen nur die ID des versteckten Eingabetyps = "Datei" geben, der der Name der OpenFileDialog-Instanz als Zeichenfolge ist.

Um Ihnen das Erstellen von Instanzen für offene Dateidialoge in Ihrem HTML zu erleichtern, können Sie eine Funktion erstellen, die dies ausführt:

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

Wenn Sie das Dialogfeld "Geöffnete Datei" entfernen möchten, können Sie die folgende Funktion erstellen und verwenden:

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;
}

Bevor Sie jedoch das Dialogfeld "Geöffnete Datei" entfernen, stellen Sie sicher, dass es vorhanden ist, indem Sie die folgende Funktion erstellen und verwenden:

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

und wenn Sie die geöffneten Dateidialoge im Hauptteil oder die Formular- Tags im HTML nicht erstellen und hinzufügen möchten , weil dies versteckte Eingabetypen = "Dateien" hinzufügt, können Sie dies im Skript mit der obigen Erstellungsfunktion tun ::

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

Stellen Sie sicher, dass Sie in der Nähe Ihres Körpers oder Ihrer Formular-Tags Folgendes hinzugefügt haben:

onload="yourBodyOrFormId_onload()"

Sie müssen diese Zeile oben nicht ausführen, wenn Sie dies bereits getan haben.

TIPP: Wenn Sie noch keine neue JScript-Datei zu Ihrem Projekt oder Ihrer Website hinzugefügt haben, können Sie in dieser Datei alle Dialogfunktionen für geöffnete Dateien von den Skript- Tags und der HTML- oder Webformularseite entfernen und verwenden Sie in Ihrer HTML- oder Webformularseite aus dieser JScript-Datei, aber vergessen Sie nicht, vorher die HTML- oder Webformularseite mit der JScript-Datei zu verknüpfen. Sie können dies einfach tun, indem Sie die JScript-Datei auf Ihre HTML-Seite in der Kopf ziehenStichworte. Wenn Ihre Seite ein Webformular und kein einfaches HTML ist und Sie keine Head-Tags haben, platzieren Sie sie an einer beliebigen Stelle, damit sie funktioniert. Vergessen Sie nicht, in dieser JScript-Datei eine globale Variable zu definieren, deren Wert Ihr Textkörper oder Ihre Formular-ID als Zeichenfolge ist. Nachdem Sie die JScript-Datei mit Ihrer HTML- oder Webformularseite verknüpft haben, können Sie das Ereignis Ihres Formularkörpers herunterladen und den Wert dieser Variablen auf Ihren Textkörper oder Ihre Formular-ID festlegen. Dann müssen Sie in der JScript-Datei dem Dokument nicht mehr die ID des Hauptteils oder die Form einer Seite geben, sondern nur den Wert dieser Variablen. Sie können diese Variable bodyId oder formId oder bodyOrFormId oder einen beliebigen anderen Namen aufrufen .

Viel Glück Mann!


1
Es ist am besten, das innerHTML nicht direkt zu ändern.
Solomon Ucko

9

Der einfachste Weg:

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

Was wichtig ist, display: nonestellt die Verwendung von sicher, dass kein Platz von der versteckten Dateieingabe belegt wird (was passiert mit opacity: 0).



2

Das einzige ohne <input type="file">ist das Einbetten eines transparenten Flash-Films über das Div. Sie können dann ein vom Benutzer generiertes Klickereignis ( gemäß den neuen Sicherheitsregeln von Flash 10) verwenden, um einen Aufruf von FileReference.browse von Flash auszulösen .

Es bietet eine zusätzliche Abhängigkeit vom Quirksmode-Modus, aber im Gegenzug erhalten Sie viel mehr Ereignisse (z. B. integrierte Fortschrittsereignisse).


-1

Darf verwenden

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

In meinem Fall führt dies zu einer automatischen Umleitung auf dieselbe Seite, auf der das ursprüngliche Klickereignis aufgetreten ist. Dadurch wird die gesamte Seite neu geladen und alle zuvor auf der Seite eingegebenen Daten gehen verloren.
Muntasir
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.