wake-up-neo.net

Dateidialogfeld in JavaScript öffnen

Ich brauche eine Lösung, um den geöffneten Dateidialog in HTML anzuzeigen, während Sie auf ein div klicken. Das Dialogfeld zum Öffnen der Datei muss geöffnet werden, wenn auf div geklickt wird.

Ich möchte die Eingabedatei nicht als Teil einer HTML-Seite anzeigen. Es muss in einem separaten Dialog angezeigt werden, der nicht Teil der Webseite ist.

78
ArK

Hier ist ein schönes

Fine Uploader Demo

Es ist selbst ein <input type='file' />-Steuerelement. Aber ein Div wird darüber platziert und CSS-Stile werden angewendet, um dieses Gefühl zu erhalten. Die Opazität des Dateisteuerelements ist auf 0 gesetzt, so dass das Dialogfenster beim Klicken auf das div angezeigt wird.

42
rahul

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

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


BEARBEITEN: In Safari wird die input deaktiviert, wenn sie mit display: none ausgeblendet wird. Ein besserer Ansatz wäre die Verwendung von position: fixed; top: -100em.


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

Wenn Sie möchten, können Sie den "korrekten Weg" gehen, indem Sie for in der label verwenden und auf die id der Eingabe zeigen.

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

Eigentlich brauchst du nicht all das Zeug mit Deckkraft, Sichtbarkeit, <input> Stil usw.

<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 in Opera 12.16 jedoch nicht.

35
Tigran Saluev

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 alle Klicks entweder auf dem Label oder dessen Label landen würden (wodurch der Upload-Dialog genauso angezeigt wird, als würden Sie auf das Label selbst klicken). Ich hatte einige Probleme mit dem Tastenteil der Standardeingabe, der aus der Seite der Beschriftung ragte, sodass overflow: hidden an der Eingabe und display: inline-block auf der Beschriftung erforderlich waren. 

14
Chris

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

Erläuterung: for="Your input Id". Löst das Klickereignis standardmäßig per HTML aus. Es löst also standardmäßig ein Click-Ereignis aus, jQuery/Javascript ist nicht erforderlich. Wenn es einfach per HTML gemacht wird, warum dann jQuery/jScript? Und Sie können nicht sagen, ob der Client JS deaktiviert hat. Ihre Funktion sollte funktionieren, obwohl JS deaktiviert ist.

Working jsFiddle (Du brauchst kein JS, Jquery)

12
Pratik C Joshi

Fügen Sie zuerst die head-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 über script-Tags verfügen, fügen Sie diese Funktionen einfach oben hinzu.

In Ihren body oder form Tags fügen Sie Folgendes hinzu:

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

Unabhängig davon, wo sich Ihre HTML-Datei befindet, ist nur so Sie haben eine neue Instanz des Typs OpenFileDialog als global Variable erstellt, deren Name id von ist das Element, egal wo in Ihrem Code oder XAML, aber in Ihrem Skript oder Code, Sie kann nicht seinen Namen eingeben, und dann eine Eigenschaft lesen oder eine Funktion aufrufen, weil Es gibt globale Funktionen, die diejenigen Funktionen ausführen, die nicht im Element input type = "file" definiert sind. Sie müssen diesen Funktionen nur die ID der verborgenen Eingabe geben type = "file". Dies ist der Name der OpenFileDialog-Instanz als Zeichenfolge.

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

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

und wenn Sie den geöffneten Dateidialog 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 den geöffneten Dateidialog entfernen, stellen Sie sicher, dass er existiert, indem Sie 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 in den Tags body oder form in der HTML-Datei nicht erstellen und hinzufügen möchten, da dies ein versteckter Eingabetyp = "file" s ist, dann können Sie es mit der oben genannten create-Funktion in einem Skript ausführen:

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 Form Tags hinzugefügt haben:

onload="yourBodyOrFormId_onload()"

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

TIP: Sie können Ihrem Projekt oder Ihrer Website eine neue JScript-Datei hinzufügen, falls Sie noch keine haben. In dieser Datei können Sie alle offenen Dateidialogfunktionen vom scriptweglegen. _-Tags und die HTML- oder Webformularseite, und verwenden Sie sie in Ihrer HTML- oder Webformularseite aus dieser JScript-Datei. Vergessen Sie jedoch nicht, die HTML- oder Webformularseite mit der JScript-Datei zu verknüpfen. Sie können dies tun, indem Sie die JScript-Datei in den Tags head auf Ihre HTML-Seite ziehen. Wenn Ihre Seite ein Webformular und kein einfaches HTML ist und Sie keine Head-Tags haben, legen Sie sie an einer beliebigen Stelle ab, damit sie funktionieren kann .. Vergessen Sie nicht, globale Variablen in dieser JScript-Datei zu definieren, deren Wert sein wird Ihre Körper- oder Form-ID als Zeichenfolge. Nachdem Sie die JScript-Datei mit Ihrer HTML- oder Webformularseite verknüpft haben, können Sie das Ereignis Ihres Formularkörpers laden, den Wert dieser Variablen auf Ihre Körper- oder Formular-ID setzen. In der JScript-Datei müssen Sie dem Dokument nicht mehr die ID des Hauptteils oder der Form einer Seite angeben, sondern geben Sie nur den Wert dieser Variablen an. Sie können diese Variable bodyId oder formId oder bodyOrFormId oder einen beliebigen anderen Namen aufrufen.

Viel Glück Mann!

Möglicherweise interessieren Sie Folgendes: http://code.google.com/p/upload-at-click/

Bei Klick auf Element wird der Dialog 'Datei öffnen' geöffnet und 

benutzerdefinierte Funktion ausführen.

4
Vitaly Fadeev

AFAIK, du brauchst noch ein <input type="file">-Element, dann kannst du etwas von quirksmode verwenden, um es zu stylen

3
Dan F

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 (entsprechend den neuen Sicherheitsregeln von Flash 10) verwenden, um einen Aufruf an FileReference.browse von Flash auszulösen.

Es bietet eine zusätzliche Abhängigkeit über den quirksmode-Weg , aber im Gegenzug erhalten Sie viele weitere Ereignisse (z. B. eingebaute Statusereignisse). 

2
Martijn Laarman

Der einfachste Weg:

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

Wichtig ist, dass mit display: none sichergestellt wird, dass keine Stelle mit versteckten Dateieingaben belegt wird (was mit opacity: 0 geschieht).

2
Karol Selak

Kann verwenden

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