przycisk przesyłania plików bez pola wprowadzania? [duplikat]

Możliwy duplikat:
jQuery: symulowanie kliknięcia na nie działa w Firefoksie?

Czy możliwe jest posiadanie przycisku plik bez wejścia obok niego domyślnie? Najlepiej wszystko, czego chcę, to przycisk, który pozwala użytkownikowi przejść do pliku bez pokazywania, co wybrał przed przesłaniem. Po wybraniu przez Użytkownika pliku prześlę poniższy formularz: 

$("#file").change(function() {
    $("#update_button").trigger('click');
});

Jestem pewien, że to musi być możliwe z jakimś css lub jQuery magic...

Author: Community, 2011-12-02
Source

4 answers

Jeśli dobrze pamiętam, HTML5 pozwala na wywołanie metody click na ukrytym elemencie wejściowym, aby wyświetlić okno dialogowe pliku za pomocą niestandardowego przycisku(dlaczego nie po prostu zrobić to działa bez elementu, Nie wiem). Niestety nie wszystkie obecnie używane przeglądarki obsługują to jeszcze, więc utknąłeś z stylizacją wejścia pliku, aby wyglądać jak przycisk.

To jest śmiesznie brzydki, ale pomysłowy hack CSS, na który natknąłem się kiedyś na stronie (prawdopodobnie imgur): 

.fileupload {
    width: 100px;
    height: 50px;
    position: relative;
    overflow: hidden;
    background: ...; /* and other things to make it pretty */
}

.fileupload input {
    position: absolute;
    top: 0;
    right: 0; /* not left, because only the right part of the input seems to
                 be clickable in some browser I can't remember */
    cursor: pointer;
    opacity: 0.0;
    filter: alpha(opacity=0); /* and all the other old opacity stuff you
                                 want to support */
    font-size: 300px; /* wtf, but apparently the most reliable way to make
                         a large part of the input clickable in most browsers */
    height: 200px;
}

I HTML do it: 

<div class="fileupload">
  <input type="file" />
  Any content here, perhaps button text
</div>

To, co robi, to sprawia, że sam plik wejściowy jest ogromny (zmieniając rozmiar czcionki (!?)), aby upewnić się, że zakrywa przycisk, a następnie odcina nadmiar za pomocą overflow: hidden;. Może to nie działać dla absolutnie ogromnych przycisków.

 21
Author: Matti Virkkunen,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-02 02:18:45

Możesz po prostu ukryć przycisk input za pomocą visibility: hidden; i dołączyć obsługę zdarzenia kliknięcia do drugiego przycisku:

HTML: 

<input type="file" name="somename" size="chars">
<button>Choose File</button>

CSS: 

input {
    display: block;
    visibility: hidden;
    width: 0;
    height: 0;
}

JavaScript: 

$('button').click(function(){
    $('input').click();
});

Oto skrzypce: http://jsfiddle.net/tCzuh/

 49
Author: Joseph Silber,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-27 15:49:36

Jeśli ustawisz krycie na 0, możesz dodać pod nim inny div, który wygląda jak przycisk. Możesz to styl jak chcesz wtedy.

Przykład kodu roboczego poniżej: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div class="wrapper">
    <div class="fakeuploadbutton">upload</div>
    <input id="file" type="file" name="file" />
</div>
<script type="text/javascript" charset="utf-8">
    jQuery('#file').css('opacity',0);    
</script>
<style type="text/css" media="screen">
    .wrapper { position: relative; }
    .fakeuploadbutton { 
        background: red url('myuploadbutton.png') no-repeat top left;
        width: 100px; height: 30px;
    }
    #file { 
        position: absolute;
        top: 0px; left: 0px; 
        width: 100px; height: 30px;
    }
</style>
 7
Author: mattlangtree,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-02 03:48:16

Opcja do obejrzenia jest tutaj:

Http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

Pozwala to na większą personalizację pola <input>

 0
Author: Jason,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-02 02:21:43