Öffnen Sie das Dateidialogfeld in JavaScript

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.

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.

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

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

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.

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.

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)

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!

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

AFAIK du brauchst noch ein <input type="file">Element, dann kannst du einige Sachen aus dem Quirksmode verwenden , um es zu stylen

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

Darf verwenden

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