Eingabetyp = Schaltfläche "Nur Datei anzeigen"

154

Gibt es eine Möglichkeit, ein <input type=file />Element (oder ein Skript) so zu gestalten, dass nur die Schaltfläche "Durchsuchen" ohne Textfeld sichtbar ist?

Vielen Dank

Edit : Nur um zu klären warum ich das brauche. Ich verwende den Upload-Code für mehrere Dateien von http://www.morningz.com/?p=5 und er benötigt kein Eingabetextfeld, da er niemals einen Wert hat. Das Skript fügt der Sammlung auf der Seite nur neu ausgewählte Dateien hinzu. Ohne Textfeld würde es viel besser aussehen, wenn es möglich ist.

javascript html css

— Andrija
quelle

167

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

Dies wird sicherlich funktionieren, ich habe es in meinen Projekten verwendet. Ich hoffe, das hilft :)

— Shiba
quelle

1

Diese Antwort ist so einfach und elegant und hat für alle Browser funktioniert.

— Mike.C.Ford

Dies ist bei weitem die beste Lösung, die ich gefunden habe. Es beseitigt ein wirklich skurriles Verhalten im Dateieingabestil mit verschiedenen mobilen Browsern. Jetzt fällt meine Dateieingabesteuerung beim Rest meines Layouts nicht mehr wie ein schmerzender Daumen auf. Vielen Dank, ich wünschte, ich könnte mehr als 1 abstimmen.

— Highdown

... und füge onchange = "this.form.submit ();" hinzu to Input File-Element, um das Hochladen nach der Dateiauswahl zu starten. Vergessen Sie nicht, alle Elemente mit dem Formular-Tag zu versehen.

— Tomas

1

Dies funktioniert in IE8 und darunter nicht, da beim Senden des Formulars ein Fehler "Zugriff verweigert" angezeigt wird (Sie können aus "Sicherheitsgründen" keine Dateieingaben mit js in IE8 und darunter auslösen)

— unenthusiasticuser

3

@unenthusiasticuser korrekt und funktioniert aus dem gleichen Sicherheitsgrund nicht auf dem iPad. :)

— Mahi

80

Ich hatte verdammt viel Zeit damit zu versuchen, dies zu erreichen. Ich wollte keine Flash-Lösung verwenden, und keine der von mir betrachteten jQuery-Bibliotheken war in allen Browsern zuverlässig.

Ich habe meine eigene Lösung entwickelt, die vollständig in CSS implementiert ist (mit Ausnahme der Änderung des Onclick-Stils, damit die Schaltfläche "angeklickt" angezeigt wird).

Sie können ein funktionierendes Beispiel hier ausprobieren: http://jsfiddle.net/VQJ9V/307/ (Getestet in FF 7, IE 9, Safari 5, Opera 11 und Chrome 14)

Es funktioniert, indem eine große Dateieingabe (mit einer Schriftgröße von 50 Pixel) erstellt und dann in ein Div mit fester Größe und festem Überlauf eingeschlossen wird: versteckt. Die Eingabe ist dann nur durch dieses "Fenster" div sichtbar. Dem Div kann ein Hintergrundbild oder eine Hintergrundfarbe zugewiesen werden, Text kann hinzugefügt werden und die Eingabe kann transparent gemacht werden, um den Div-Hintergrund anzuzeigen:

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

Lassen Sie mich wissen, wenn es Probleme gibt, und ich werde versuchen, diese zu beheben.

— kaufmännisches Und
quelle

4

Dies war die beste Lösung, die mir begegnet ist und die mit allen Browsern funktioniert hat

— Fatal

2

Du bist der Mann. Ich habe mit diesem Problem bei FF zu kämpfen und Ihre Lösung ist die einzige, die wirklich funktioniert, insbesondere bei größeren Schaltflächen, indem der aktive Bereich mithilfe der "Schriftgröße" vergrößert wird. Vielen Dank! :)

— Jpincheira

2

Ausgezeichnet ohne Skript

— Bujji

1

Twitter macht es, aber es war ein bisschen verworren im Vergleich zu diesem. Funktioniert gut für mich!

— Band eins

gute Lösung! Nur eine Frage: Warum geben Sie .fileInput nicht eine Breite von 100% und setzen die Breite von .inputWrapper auf auto?

— Luin

52

Ich habe heute meinen Tag damit verschwendet, dies zum Laufen zu bringen. Ich habe hier keine der Lösungen gefunden, die für jedes meiner Szenarien geeignet sind.

Dann erinnerte ich mich, dass ich ein Beispiel für das Hochladen von JQuery-Dateien ohne Textfeld gesehen hatte. Also habe ich ihr Beispiel genommen und es auf den relevanten Teil reduziert.

Diese Lösung funktioniert zumindest für IE und FF und kann vollständig gestaltet werden. Im folgenden Beispiel ist die Dateieingabe unter der ausgefallenen Schaltfläche "Dateien hinzufügen" ausgeblendet.

<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>

— tmanthey
quelle

4

Wichtig ist, dass der Überlauf des Containers ausgeblendet ist.

— Maxim V. Pavlov

1

Das hat zumindest in IE & Chrome absolut funktioniert. Danke :)

— Kevin Dark

1

Randbreite: 0 0 100px 200px; arbeitete auch für mich in IE und Chrome. Vielen Dank.

— Paul

2

Wenn ich die ursprüngliche Frage gestellt hätte, hätte ich den Anstand gehabt, dies als Antwort zu markieren. Vielen Dank.

— Mark Rendle

Eine bessere Antwort finden Sie weiter unten. Verwenden Sie eine Beschriftung, verbergen Sie die Eingabe. Funktioniert super!

— Gman

25

Blenden Sie das Element der Eingabedatei aus und erstellen Sie eine sichtbare Schaltfläche, die das Klickereignis dieser Eingabedatei auslöst.

Versuche dies:

CSS

#file { width:0; height:0; }

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

JAVASCRIPT (jQuery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

— Jojo
quelle

Ich habe ein jQuery-Plugin erstellt, das alles für Sie erledigt: github.com/mbitto/jquery.buttonFile

— Manuel Bitto

Dies funktioniert in den neueren Versionen von IE nicht. Der indirekte Klick bewirkt, dass der IE ausklappt und den Zugriff verweigert. Es ist nervig.

— Andrew

20

Blenden Sie das Eingabedatei-Tag mit CSS aus, fügen Sie eine Beschriftung hinzu und weisen Sie sie der Eingabeschaltfläche zu. Die Beschriftung kann angeklickt werden. Wenn Sie darauf klicken, wird der Dateidialog geöffnet.

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Fügen Sie den Stil als Schaltfläche zum Etikett hinzu.
Live-Demo

— Suresh Pattu
quelle

1

Funktioniert gut in Safari heute 4. Februar 2015

— gman

Dies kann die einfachste und beste Antwort sein. Ich würde dem auch einen onchangeHandler hinzufügen input, damit JS-Code die hochgeladenen Dateiinformationen abrufen kann.

— David R Tribble

16

Das wird sehr schwer. Das Problem mit dem Dateieingabetyp besteht darin, dass er normalerweise aus zwei visuellen Elementen besteht und gleichzeitig als ein einzelnes DOM-Element behandelt wird. Hinzu kommt, dass mehrere Browser ein eigenes Erscheinungsbild für die Dateieingabe haben und Sie auf einen Albtraum eingestellt sind. In diesem Artikel auf quirksmode.org finden Sie Informationen zu den Macken, die die Dateieingabe aufweist. Ich garantiere dir, es wird dich nicht glücklich machen (ich spreche aus Erfahrung).

[BEARBEITEN]

Eigentlich denke ich, dass Sie möglicherweise davonkommen, wenn Sie Ihre Eingabe in ein Containerelement (wie ein div) einfügen und dem Element einen negativen Rand hinzufügen. Das Textfeldteil wird effektiv außerhalb des Bildschirms ausgeblendet. Eine andere Möglichkeit wäre, die Technik in dem Artikel, den ich verlinkt habe, zu verwenden, um zu versuchen, sie wie eine Schaltfläche zu gestalten.

— Erik van Brakel
quelle

4

Dieser Artikel über den Quirksmode ist großartig. Das Stylen von Dateieingaben ist jedoch immer noch ein Problem. : P

— MitMaro

Ich denke nicht, dass der enthaltene Netagive-Rand gut funktioniert, wenn Sie unterschiedliche Browser-Stile und Mindestschriftgrößen berücksichtigen, die von Benutzer zu Benutzer unterschiedlich sind.

— Joebert

1

Joebert: Ich stimme zu, ich denke, die beste Option ist immer noch die Technik, die im Quirksmode-Artikel gezeigt wird, wie schmerzhaft hackisch ...

— Erik van Brakel

14

Fix funktioniert in allen Browsern BEHOBEN:

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

Ich habe in FF, Chrome & IE getestet - funktioniert gut, auch angewandte Stile: D.

— Javier Reyes
quelle

6

Ich bin mir ziemlich sicher, dass dies bei einer ganzen Reihe von Browsern nicht funktioniert (einschließlich FF und IE, als ich das letzte Mal getestet habe) - der einzige Browser, an den ich mich erinnere, war Chrome.

— Herman Schaaf

Das funktioniert nur mit jQuery, ist aber keine eigenständige Lösung.

— Magnet

3

Dies scheint zu funktionieren (es öffnet sich das Menü zur Dateiauswahl), aber wenn das Formular gesendet wird, wird die Datei aus Sicherheitsgründen nicht in FireFox und IE gesendet.

— kaufmännisches Und

13

Ich habe versucht, die beiden Top-Lösungen zu implementieren, und es war eine RIESIGE Zeitverschwendung für mich. Am Ende löste das Anwenden dieser CSS-Klasse das Problem ...

input[type='file'] {
  color: transparent;
}

Getan! super sauber und super einfach ...

— Nikotromus
quelle

1

Das ist eine großartige Methode!

— Kaow

9

Ein weiterer einfacher Weg, dies zu tun. Erstellen Sie ein "Input Type File" -Tag in HTML und blenden Sie es aus. Klicken Sie dann auf eine Schaltfläche und formatieren Sie sie nach Bedarf. Verwenden Sie anschließend Javascript / jquery, um programmgesteuert auf das Eingabe-Tag zu klicken, wenn Sie auf die Schaltfläche klicken.

HTML: -

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JavaScript: -

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery: -

$('#button').click(function(){
    $('#file').click();
});

CSS: -

#button
{
    background-color: blue;
    color: white;
}

Hier ist eine funktionierende JS-Geige für dasselbe: - http://jsfiddle.net/32na3/

— divyenduz
quelle

2

Dies ist eine nette Lösung, aber ich kann sie in Chrome nicht zum Laufen bringen. Anscheinend können andere auch nicht. Opera und Chrome erlauben aus Sicherheitsgründen kein Klicken auf eine Eingabetypdatei. Hier finden Sie mehr darüber und eine Lösung, die für mich funktioniert hat: stackoverflow.com/a/3030174/2650732

— wojjas

Als ich diese Antwort schrieb, funktionierte sie auf Chrom. Vielen Dank, dass Sie mich wissen lassen, wird meine Antwort entsprechend aktualisieren

— divyenduz

7

Ich habe einen Teil des oben empfohlenen Codes verwendet und nach vielen Stunden meiner Zeit kam ich schließlich zu einer Lösung ohne CSS-Beutel.

Sie können es hier ausführen - http://jsfiddle.net/WqGph/

fand dann aber eine bessere Lösung - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

— GoreOle
quelle

Das Problem ist, dass das onchangeEreignis für das versteckte inputElement nicht ausgelöst wird .

— David R Tribble

6

Hier ist mein gutes altes Mittel:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

Zumindest hat es in Safari funktioniert.

Schlicht und einfach.

— Zooza S.
quelle

4

Sie können ein Bild beschriften, sodass beim Klicken das Klickereignis der Schaltfläche ausgelöst wird. Sie können die normale Schaltfläche einfach unsichtbar machen:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

Es hat bei mir in allen Browsern funktioniert und ist sehr einfach zu bedienen.

— D-Inventor
quelle

4

Sie können das Klickereignis für eine versteckte Dateieingabe wie folgt auslösen:

<form action="#type your action here" method="POST" enctype="multipart/form-data">
   		<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>
    	<!-- hide input[type=file]!-->
    	<div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
    	<input type="submit" value='submit' >
    </form>

    <script type="text/javascript">
    	var btn = document.getElementById("yourBtn");
    	var upfile = document.getElementById("upfile"); 
    	btn.addEventListener('click',function(){
    		if(document.createEvent){
    			var ev = document.createEvent('MouseEvents');
    			ev.initEvent('click',true,false);
    			upfile.dispatchEvent(ev);
    		}else{
        		upfile.click();
    		}
    	});
    
    </script>

Erweitern Sie das Snippet

— jiang min
quelle

var ev = document.createEvent('HTMLEvents'); Ändern Sie HTMLEvents in MouseEventsvar ev = document.createEvent('MouseEvents');

— jiang min

Nett, danke! Ich habe Ihren Beitrag in ein ausführbares Code-Snippet konvertiert und HtmlEvents in MouseEvents geändert

— Fabian Schmengler

4

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
    <button  id="browse">Upload</button>

JQUERY

 $(document).ready(function(){
        $("#browse").click(function(){
        $("#upload").click();
        });
 });

Hoffe das funktioniert :)

— Anoop Saju
quelle

4

Sie können dem Eingabeelement eine Schriftopazität von 0 geben. Dadurch wird das Textfeld ausgeblendet, ohne die Schaltfläche "Dateien auswählen" auszublenden.

Kein Javascript erforderlich, löschen Sie den Cross-Browser bereits im IE 9

Z.B,

input {color: rgba(0, 0, 0, 0);}

— nicholmen
quelle

3

Ich habe eine wirklich hackige Lösung damit ...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

<input id="File1" type="file" />

Das Problem ist, dass das width-Attribut, das das Textfeld verbirgt, offensichtlich zwischen den Browsern, zwischen Windows XP-Designs usw. variiert. Vielleicht ist es etwas, mit dem du arbeiten kannst? ...

Auch wenn dieser unter IE6 nicht funktioniert, versteht der Browser keine Attributselektoren.

— Adrian Godong

3

Ich weiß, dass dies ein alter Beitrag ist, aber eine einfache Möglichkeit, den Text verschwinden zu lassen, besteht darin, die Textfarbe auf die Ihres Hintergrunds einzustellen.

Beispiel: Wenn Ihr Texteingabehintergrund weiß ist, dann:

input[type="file"]{
color:#fff;
}

Dies wirkt sich nicht auf den Text "Datei auswählen" aus, der aufgrund des Browsers immer noch schwarz ist.

— Keleko
quelle

1

Wenn ein Benutzer auf diesen Teil klickt, wird das Upload-Popup geöffnet.

— Praveen

3

Das funktioniert bei mir:

input[type="file"]  {
    color: white!important;
}

— Neuling
quelle

2

Meine Lösung besteht darin, es innerhalb eines Divs zu setzen, wie "Druveen" sagte, aber ich füge dem Div meinen eigenen Schaltflächenstil hinzu (lass es wie eine Schaltfläche mit einem: Hover aussehen) und ich setze einfach den Stil "Deckkraft: 0;" zum Eingang. Funktioniert ein Zauber für mich, hoffe es tut das gleiche für dich.

— ThomasG
quelle

2

Ich habe gerade eine Eingabedatei mit einer Breite von 85 Pixel gestylt, und das Textfeld ist überhaupt verschwunden

Ist das Textfeld also verschwunden oder nicht? "überhaupt" mighr impliziert dort eine Negation, aber Ihre Grammatik ist fehlerhaft (und daher mehrdeutig).

— Kirk Woll

2

Dieser HTML-Code zeigt nur die Schaltfläche Datei hochladen an

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>

— Anil Shetty
quelle

1

Bitte erwägen Sie, Ihrer Antwort einige Kontextinformationen hinzuzufügen, die beschreiben, was Ihr Code-Snippet tut.

— Clijsters

1

<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

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

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});

— Somwang Souksavatd
quelle

1

Für mich ist der einfachste Weg, eine Schriftfarbe wie die Hintergrundfarbe zu verwenden. Einfach, nicht elegant, aber nützlich.

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

1

Hier ist der beste Weg, dies für alle Browser zu tun :

Vergiss CSS!

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>

<script>
$('#images').hide();        
$('#clickImage').click( function() {    
    $('#images').trigger('click');  
});
</script>

— user1965301
quelle

DAS FUNKTIONIERT NICHT IN SAFARI ... da es aus Sicherheitsgründen keinen .trigger ('click') zulässt :? Damit es in Safari dynamisch funktioniert, erstellen Sie die Datei-Schaltfläche und fügen Sie sie erneut hinzu, wenn sie erneut geladen wird

— user1965301

1

Alle diese Antworten sind niedlich, aber CSS funktioniert nicht, da es nicht für alle Browser und Geräte gleich ist. Die erste Antwort, die ich geschrieben habe, funktioniert nur für Safari. Damit es in allen Browsern funktioniert, muss es dynamisch erstellt und jedes Mal neu erstellt werden, wenn Sie den Eingabetext löschen möchten:

    var imageDiv = document.createElement("div");   
    imageDiv.setAttribute("id", "imagediv");
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';  
    var imageText = document.createTextNode("Append Image:");
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");    
    image.setAttribute("type", "file");
    image.setAttribute("id", "images");
    image.setAttribute("name", "images[]");     
    image.setAttribute("multiple", "multiple");
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);

— user1965301
quelle

1

Die Antwort von tmanthey ist ziemlich gut, außer dass Sie in Firefox v20 nicht mit der Randbreite spielen können. Wenn Sie den Link sehen (Demo, kann hier nicht wirklich angezeigt werden), haben sie das Problem mit font-size = 23px gelöst. Transformieren Sie: translate (-300px, 0px) scale (4), damit Firefox die Schaltfläche vergrößert.

Andere Lösungen, die .click () für ein anderes div verwenden, sind nutzlos, wenn Sie es zu einem Drag'n'Drop-Eingabefeld machen möchten.

— Balint Karakai
quelle

1

Hier gibt es mehrere gültige Optionen, aber ich dachte, ich würde das geben, was ich mir ausgedacht habe, während ich versucht habe, ein ähnliches Problem zu beheben. http://jsfiddle.net/5RyrG/1/

<span class="btn fileinput-button">
    <span>Import Field(s)</span>
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>

function handleFiles(files){
    $('#txt').text(files[0].name);  
}

— Matthew Pautzke
quelle

1

Mit folgendem Code behoben:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

— Druveen
quelle

1

Ich habe das geschrieben:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>

    <div style="width: 0; height: 0; overflow: hidden;">
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />
    </div>
    
</form>

<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

Erweitern Sie das Snippet

Funktioniert einwandfrei in allen Browsern, ohne jQuery, ohne CSS.

— MadMaxIII
quelle

1

Hier ist eine vereinfachte Version der beliebten Lösung von @ ampersandre, die in allen gängigen Browsern funktioniert. Asp.NET-Markup

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

JQuery-Code

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

CSS-Code

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Verwendet einen versteckten "UploadButton" -Klick-Trigger für das Server-Postback mit Standard. Der Text mit "Datei hochladen" verdrängt das Eingabesteuerelement im Wrapper-Div, wenn es überläuft, sodass keine Stile für das Steuerelement "Dateieingabe" angewendet werden müssen. Der Selektor $ ([id $ = "FileInput"]) ermöglicht den Abschnitt von IDs mit angewendeten Standard-ASP.NET-Präfixen. Der FilePath-Textfeldwert wird aus dem Servercode hinter hdnFileName.Value festgelegt, sobald die Datei hochgeladen wurde.

— Dan Randolph
quelle