typ wejścia = plik pokaż tylko przycisk

154

Czy istnieje sposób na stylizację (lub skrypt) <input type=file />elementu tak, aby był widoczny tylko przycisk „Przeglądaj” bez pola tekstowego?

Dzięki

Edycja : tylko po to, aby wyjaśnić, dlaczego tego potrzebuję. Używam kodu przesyłania wielu plików z http://www.morningz.com/?p=5 i nie potrzebuje on pola tekstowego, ponieważ nigdy nie ma wartości. Skrypt po prostu dodaje nowo wybrany plik do kolekcji na stronie. Gdyby było to możliwe, wyglądałoby znacznie lepiej bez pola tekstowego.

Andrija
źródło

Odpowiedzi:

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

To na pewno zadziała, użyłem go w moich projektach, mam nadzieję, że to pomoże :)

shiba
źródło
1
Ta odpowiedź jest tak prosta i elegancka, że ​​działa we wszystkich przeglądarkach.
Mike C. Ford
To zdecydowanie najlepsze rozwiązanie, jakie znalazłem. Eliminuje to trochę dziwaczne zachowanie stylu wprowadzania plików w różnych przeglądarkach mobilnych. Teraz moja kontrolka wprowadzania plików nie wyróżnia się jak bolący kciuk z resztą mojego układu. Wielkie dzięki, chciałbym móc zagłosować więcej niż 1.
Highdown
... i dodaj onchange = "this.form.submit ();" do elementu Input File, aby rozpocząć przesyłanie po wybraniu pliku. Nie zapomnij otoczyć wszystkich elementów znacznikiem Form.
Tomas
1
To nie zadziała w IE8 i niższych, ponieważ podczas wysyłania formularza pojawi się błąd Odmowa dostępu (nie możesz wywołać wejścia pliku z js w IE8 i niższych ze względów bezpieczeństwa)
unenthusiasticuser
3
@unenthusiasticuser jest poprawne i nie będzie działać na iPadzie z tych samych powodów bezpieczeństwa. :)
Mahi,
80

Miałem cholernie dużo czasu, próbując to osiągnąć. Nie chciałem używać rozwiązania Flash, a żadna z bibliotek jQuery, które oglądałem, nie była niezawodna we wszystkich przeglądarkach.

Wymyśliłem własne rozwiązanie, które jest zaimplementowane w całości w CSS (z wyjątkiem zmiany stylu onclick, która powoduje, że przycisk wygląda na „kliknięty”).

Możesz wypróbować działający przykład tutaj: http://jsfiddle.net/VQJ9V/307/ (testowane w FF 7, IE 9, Safari 5, Opera 11 i Chrome 14)

Działa poprzez utworzenie dużego pliku wejściowego (z rozmiarem czcionki: 50px), a następnie zawijanie go w element div o stałym rozmiarze i przepełnieniu: ukryty. Dane wejściowe są wtedy widoczne tylko przez ten element div „window”. Elementowi DIV można nadać obraz lub kolor tła, można dodać tekst, a dane wejściowe można uczynić przezroczystymi, aby odsłonić tło elementu DIV:

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

Daj mi znać, jeśli są z tym jakieś problemy, a postaram się je naprawić.

ampersandre
źródło
4
to było najlepsze rozwiązanie, z jakim się spotkałem, działające ze wszystkimi przeglądarkami
Fatal
2
Jesteś mężczyzną. Zmagałem się z tym problemem na FF i twoje rozwiązanie jest jedynym, które naprawdę działa, szczególnie w przypadku większych przycisków poprzez zwiększenie obszaru aktywnego za pomocą „rozmiaru czcionki”. Dzięki! :)
jpincheira
2
Doskonały bez użycia żadnego skryptu
Bujji
1
Twitter to robi, ale w porównaniu z tym był nieco zagmatwany. U mnie działa dobrze!
tom pierwszy,
dobre rozwiązanie! Tylko jedno pytanie: dlaczego nie podasz .fileInput o szerokości 100% i nie ustawisz szerokości .inputWrapper na auto?
luin
52

Zmarnowałem dziś dzień, żeby to zadziałało. Nie znalazłem tutaj żadnego rozwiązania działającego w każdym z moich scenariuszy.

Wtedy przypomniałem sobie, że widziałem przykład przesyłania plików JQuery bez pola tekstowego. Więc to, co zrobiłem, to wziąłem ich przykład i zredukowałem go do odpowiedniej części.

To rozwiązanie działa przynajmniej dla IE i FF i może być w pełni stylizowane. W poniższym przykładzie plik wejściowy jest ukryty pod fantazyjnym przyciskiem „Dodaj pliki”.

<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
źródło
4
Ważną częścią jest to, że przepełnienie kontenera jest ustawione jako ukryte.
Maxim V. Pavlov
1
To absolutnie zadziałało dla mnie przynajmniej w IE i Chrome. Dzięki :)
Kevin Dark
1
border-width: 0 0 100px 200px; pracował dla mnie też w IE i Chrome. Dzięki.
Paweł
2
Gdybym zadał pierwotne pytanie, byłbym na tyle przyzwoity, że oznaczyłbym to jako odpowiedź. Dzięki.
Mark Rendle
Lepsza odpowiedź znajduje się poniżej. Użyj etykiety, ukryj dane wejściowe. Działa świetnie!
gman
25

Ukryj element pliku wejściowego i utwórz widoczny przycisk, który wyzwoli zdarzenie kliknięcia tego pliku wejściowego.

Spróbuj tego:

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
źródło
Stworzyłem wtyczkę jQuery, która robi to wszystko dla Ciebie: github.com/mbitto/jquery.buttonFile
Manuel Bitto Stycznia
To nie działa w nowszych wersjach IE. Kliknięcie pośrednie powoduje wyłączenie IE i odmowę dostępu. To denerwujące.
Andrew
20

Ukryj znacznik pliku wejściowego za pomocą css, dodaj etykietę i przypisz ją do przycisku wejściowego. będzie można kliknąć, a po kliknięciu otworzy okno dialogowe pliku.

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

Dodaj styl do etykiety jako przycisk.
Live Demo

Suresh Pattu
źródło
1
Działa dobrze w Safari dzisiaj, 4 lutego, 2015
gman
To może być najprostsza i najlepsza odpowiedź. Dodałbym również onchangeprocedurę obsługi do inputpliku, aby umożliwić kodowi JS pobranie informacji o przesłanym pliku.
David R Tribble
16

To będzie bardzo trudne. Problem z typem wejściowym pliku polega na tym, że zwykle składa się on z dwóch elementów wizualnych, a jednocześnie jest traktowany jako pojedynczy element DOM. Dodaj do tego to, że kilka przeglądarek ma własny, odrębny wygląd i sposób działania podczas wprowadzania pliku, a jesteś gotowy na koszmar. Zobacz ten artykuł na quirksmode.org o dziwactwach, jakie ma wejście do pliku. Gwarantuję, że nie sprawi ci to radości (mówię z doświadczenia).

[EDYTOWAĆ]

Właściwie myślę, że możesz uciec, umieszczając dane wejściowe w elemencie kontenera (takim jak div) i dodając ujemny margines do elementu. Skutecznie ukrywa część pola tekstowego poza ekranem. Inną opcją byłoby użycie techniki z artykułu, do którego utworzyłem łącze, aby spróbować stylizować go na przycisk.

Erik van Brakel
źródło
4
Ten artykuł o quirksmode jest świetny. Jednak wprowadzanie plików stylizacji jest nadal uciążliwe. : P
MitMaro,
Nie sądzę, aby zawarty margines netagive działał dobrze, jeśli weźmie się pod uwagę różne style przeglądarki i minimalne rozmiary czcionek różniące się w zależności od użytkownika.
joebert,
1
joebert: Zgadzam się, myślę, że najlepszą opcją jest nadal technika pokazana w artykule o quirksmode, jak boleśnie hackish ...
Erik van Brakel
14

Poprawka do pracy we wszystkich przeglądarkach ROZWIĄZANE:

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

Testowałem w FF, Chrome i IE - działa dobrze, stosowane style też: D

Javier Reyes
źródło
6
Jestem prawie pewien, że to nie działa na całej liczbie przeglądarek (w tym FF i IE, kiedy ostatnio testowałem) - jedyną przeglądarką, na której pamiętam, była Chrome.
Herman Schaaf
Działa to tylko z jQuery, ale nie jest samodzielnym rozwiązaniem.
Elektrozawór
3
To wydaje się do pracy (to pojawienie się menu wyboru pliku), ale gdy formularz jest składany, plik nie zostanie wysłany w Firefox i IE, ze względów bezpieczeństwa.
ampersandre
13

Próbowałem wdrożyć dwa najlepsze rozwiązania i okazało się to dla mnie OGROMNĄ stratą czasu. W końcu zastosowanie tej klasy .css rozwiązało problem ...

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

Gotowe! super czysty i super prosty ...

nikotromus
źródło
1
To świetna metoda!
Kaow
9

Kolejny łatwy sposób na zrobienie tego. Utwórz tag „plik typu wejściowego” w html i ukryj go. Następnie kliknij przycisk i sformatuj go zgodnie z potrzebami. Następnie użyj javascript / jquery, aby programowo kliknąć znacznik wejściowy po kliknięciu przycisku.

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

Oto działające skrzypce JS do tego samego: - http://jsfiddle.net/32na3/

divyenduz
źródło
2
To fajne rozwiązanie, ale nie mogę go uruchomić w Chrome. Najwyraźniej inni też nie mogą. Opera i Chrome nie zezwalają na kliknięcie pliku typu wejściowego ze względów bezpieczeństwa. Tutaj możesz znaleźć więcej na ten temat i rozwiązanie, które dla mnie zadziałało: stackoverflow.com/a/3030174/2650732
wojjas
Kiedy pisałem tę odpowiedź, działało na chrome. Dzięki za poinformowanie mnie, zaktualizuję odpowiednio moją odpowiedź
divyenduz
7

Użyłem części kodu zalecanego powyżej i po wielu godzinach marnowania czasu w końcu doszedłem do rozwiązania bez torby CSS.

Możesz go uruchomić tutaj - http://jsfiddle.net/WqGph/

ale potem znalazłem lepsze rozwiązanie - 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
źródło
Problem polega na tym, że onchangezdarzenie nie jest wyzwalane dla ukrytego inputelementu.
David R Tribble
6

Oto moje stare dobre lekarstwo:

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

Przynajmniej działało w Safari.

Jasne i proste.

Zooza S
źródło
4

Możesz oznaczyć obraz tak, aby po jego kliknięciu wywoływane było zdarzenie kliknięcia przycisku. Możesz po prostu uczynić zwykły przycisk niewidocznym:

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

Działa dla mnie we wszystkich przeglądarkach i jest bardzo łatwy w użyciu.

D-Inventor
źródło
4

Możesz wywołać zdarzenie kliknięcia na ukrytym pliku wejściowym w następujący sposób:

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

jiang min
źródło
var ev = document.createEvent('HTMLEvents'); zmień HTMLEvents na MouseEventsvar ev = document.createEvent('MouseEvents');
jiang min
Fajnie dzięki! Przekonwertowałem twój post na gotowy do uruchomienia fragment kodu i zmieniłem HtmlEvents na MouseEvents
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();
        });
 });

Mam nadzieję, że to zadziała :)

Anoop saju
źródło
4

Możesz nadać elementowi wejściowemu nieprzezroczystość czcionki równą 0. Spowoduje to ukrycie pola tekstowego bez ukrywania przycisku „Wybierz pliki”.

Nie wymaga javascript, przejrzysta przeglądarka internetowa już w IE 9

Na przykład,

input {color: rgba(0, 0, 0, 0);}
nicholmen
źródło
3

Mam naprawdę zepsute rozwiązanie z tym ...

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

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

Problem polega na tym, że atrybut szerokości, który ukrywa pole tekstowe, oczywiście różni się w zależności od przeglądarki, różni się w zależności od motywów systemu Windows XP i tak dalej. Może to jednak coś, z czym możesz pracować? ...


źródło
Nawet ten nie będzie działał w IE6, przeglądarka nie obsługuje selektorów atrybutów.
Adrian Godong,
3

Wiem, że to stary post, ale prostym sposobem na zniknięcie tekstu jest ustawienie koloru tekstu na kolor tła.

np. jeśli tło wprowadzania tekstu jest białe, to:

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

Nie wpłynie to na tekst Wybierz plik, który z powodu przeglądarki nadal będzie czarny.

Keleko
źródło
1
Jeśli użytkownik kliknie tę część, otworzy się wyskakujące okienko przesyłania.
Praveen
3

To działa dla mnie:

input[type="file"]  {
    color: white!important;
}
Nowicjusz
źródło
2

moim rozwiązaniem jest po prostu ustawienie go w elemencie div, tak jak powiedział "druveen", jednak dodam własny styl przycisku do elementu div (nadaj mu wygląd przycisku z: hover) i ustawiam styl "krycie: 0;" do wejścia. Dla mnie działa jak urok, mam nadzieję, że zrobi to samo dla ciebie.

ThomasG
źródło
2

Po prostu nadałem plikowi wejściowemu styl o szerokości: 85 pikseli, a pole tekstowe w ogóle zniknęło


źródło
Czy więc pole tekstowe zniknęło, czy nie? „w ogóle” mighr implikuje tam negację, ale twoja gramatyka jest błędna (a przez to niejednoznaczna).
Kirk Woll,
2

Ten kod HTML pokazuje tylko przycisk Prześlij plik

<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
źródło
1
Zastanów się nad dodaniem do odpowiedzi pewnych informacji kontekstowych, które opisują, co robi Twój fragment kodu.
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
źródło
1

Dla mnie najprostszym sposobem jest użycie koloru czcionki, takiego jak kolor tła. Proste, nie eleganckie, ale przydatne.

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

źródło
1

Oto najlepszy sposób, aby to zrobić DLA WSZYSTKICH PRZEGLĄDAREK:

Zapomnij o 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
źródło
TO NIE BĘDZIE DZIAŁAŁO W SAFARI ... ponieważ nie zezwoli na .trigger („kliknięcie”) ze względów bezpieczeństwa:? aby działał w Safari dynamicznie utwórz przycisk pliku i dodaj go ponownie po ponownym załadowaniu
user1965301
1

Wszystkie te odpowiedzi są urocze, ale CSS nie będzie działać, ponieważ nie jest taki sam we wszystkich przeglądarkach i urządzeniach, pierwsza odpowiedź, którą napisałem, będzie działać we wszystkim oprócz Safari. Aby działał we wszystkich przeglądarkach przez cały czas, musi być tworzony dynamicznie i odtwarzany za każdym razem, gdy chcesz wyczyścić tekst wejściowy:

    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
źródło
1

Odpowiedź tmanthey jest całkiem dobra, z wyjątkiem tego, że nie można grać z border-width w Firefoksie v20. Jeśli widzisz link (demo, tak naprawdę nie można go tu pokazać), rozwiązali problem, używając font-size = 23px, transform: translate (-300px, 0px) scale (4) dla Firefoksa, aby powiększyć przycisk.

Inne rozwiązania wykorzystujące .click () na innym elemencie div są bezużyteczne, jeśli chcesz, aby było to pole wprowadzania danych metodą drag'n'drop.

Balint Karakai
źródło
1

Jest tutaj kilka ważnych opcji, ale pomyślałem, że podam to, co wymyśliłem, próbując rozwiązać podobny problem. 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
źródło
1

Rozwiązano za pomocą następującego kodu:

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

pijany
źródło
1

Ja to napisałem:

<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();" />

Działa dobrze we wszystkich przeglądarkach, bez jQuery, bez CSS.

MadMaxIII
źródło
1

Oto uproszczona wersja popularnego rozwiązania @ ampersandre, które działa we wszystkich głównych przeglądarkach. Znaczniki Asp.NET

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

Kod JQuery

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

kod css

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

Używa ukrytego wyzwalacza kliknięcia „UploadButton” do ogłaszania zwrotnego serwera ze standardem. Tekst z tekstem „Prześlij plik” wypycha element sterujący wejścia poza widok w opakowującym elemencie div, gdy przepełnia, więc nie ma potrzeby stosowania żadnych stylów dla elementu sterującego „wejście pliku”. Selektor $ ([id $ = "FileInput"]) umożliwia sekcję identyfikatorów z zastosowanymi standardowymi prefiksami ASP.NET. Wartość pola tekstowego FilePath jest ustawiana na podstawie kodu serwera z hdnFileName.Value po przesłaniu pliku.

Dan Randolph
źródło