Wejście pliku wyzwalacza jQuery

163

Próbuję wywołać okno przesyłania (przycisk przeglądania) za pomocą jQuery.
Metoda, którą teraz wypróbowałem, to:

$('#fileinput').trigger('click');

Ale to nie działa. Proszę pomóż. Dziękuję Ci.

javascript jquery css

— Alec Smart
źródło

Można spróbować czegoś podobnego to zamiast.

— Kirtan

19

Nie da się tego zrobić? Jakie to przygnębiające.

— Marcus Downing

Rzeczywiście przygnębiające i wywoływane przez „kliknięcie”, poważnie? Zdecydowanie wolę Flash / AS3, z jego ścisłym API i silnym modelem bezpieczeństwa, który umożliwia wywoływanie FileReference.browse tylko z modułu obsługi zdarzeń wejściowych zainicjowanego przez użytkownika. Co więcej, dane wejściowe w pliku HTML są brzydkie i nie można ich napisać (to tylko znacznik wejściowy, tyle dla oddzielenia treści i stylu), więc musisz utworzyć nowy przycisk `` przeglądaj '', który jest również aktywowany przez zdarzenie kliknięcia ... które musisz przekazać do pliku wejściowego jako kliknięcie ... co może prowadzić do nieskończonej rekurencji w zależności od umiejscowienia elementu i specyfiki delegowania zdarzenia.

— Triynko

Niestety, używanie Flasha staje się coraz mniej opłacalne, biorąc pod uwagę jego ciągłe problemy z bezpieczeństwem i wzrost liczby blokerów treści.

— Tim

195

Wynika to z ograniczeń bezpieczeństwa.

Dowiedziałem się, że ograniczenie bezpieczeństwa występuje tylko wtedy, gdy <input type="file"/>jest ustawione display:none;lub jest visbilty:hidden.

Spróbowałem więc umieszczenie go na zewnątrz przez ustawienie rzutni position:absolutei top:-100px;i voilà to działa.

zobacz http://jsfiddle.net/DSARd/1/

nazwij to hackem.

Mam nadzieję, że to działa dla Ciebie.

— adardesign
źródło

4

nie działa w ff 3.6. działa w chrome a nawet w np. 8 :)

— AyKarsi

4

Czy w witrynie msdn jest dostępna dokumentacja dotycząca ograniczenia zabezpieczeń?

— eomeroff

2

Działa świetnie. W każdym razie myślę, że bezpieczniej jest ustawić left: -100px;. Nigdy nie wiadomo, jak długo może być stroną

— Alter Lagos

+1 To jest prawdziwa odpowiedź (i dobre rozwiązanie). Czy ktoś miałby link do dokumentacji, w której jest to wyraźnie określone?

— kontur

9

możesz również ustawić krycie na 0

— Stuart

109

to zadziałało dla mnie:

JS:

$('#fileinput').trigger('click');

HTML:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

CSS:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

>>> Kolejny, który działa w różnych przeglądarkach: <<<

Chodzi o to, aby nałożyć niewidoczny ogromny przycisk „Przeglądaj” na przycisk niestandardowy. Kiedy więc użytkownik kliknie przycisk niestandardowy, w rzeczywistości klika przycisk „Przeglądaj” w natywnym polu wejściowym.

JS Fiddle: http://jsfiddle.net/5Rh7b/

HTML:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

CSS:

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

JavaScript:

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});

— sanki
źródło

Jest jedna wada, jeśli rozszerzysz przycisk, to w IE9 / 10 niewidoczny przycisk przesyłania składa się z prawego przycisku i lewego pola tekstowego. Na to musisz dwukrotnie kliknąć. W takim przypadku spróbuj ustawić rozmiar czcionki nawet większy niż 100px;

— yunzen

Działa to nawet w Chrome 53. Jednak heightsugeruje się zmianę naheight: 100%

— Raptor

Drugi działa nawet w Safari na iOS. Bardzo dobrze!

— Jannis

71

Możesz użyć elementu LABEL np.

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>

Rozwiń fragment

Spowoduje to uruchomienie pliku wejściowego

— Jhon Rey
źródło

5

Dlaczego nie jest to akceptowana odpowiedź? To najprostszy sposób, który nie wymaga funky JavaScript.

— tomitrescak

@tomitrescak OP nie czeka na uzyskanie najlepszej odpowiedzi.

— Mahi,

9

Pamiętaj, że odpowiedź została opublikowana 7 lat po zadaniu pytania.

1

Najlepsza odpowiedź również w 2018 roku.

— masoomyf

1

Najlepsza odpowiedź również na 2019 rok;)

— guillaumepotier

17

Mam to działające (= testowane) w IE8 +, najnowsze FF i chrome:

$('#uploadInput').focus().trigger('click');

Klawisz ustawia ostrość przed kliknięciem (w przeciwnym razie chrome go ignoruje).

Uwaga: MUSISZ mieć wyświetlane i widoczne dane wejściowe (tak jak w, nie display:nonei nie visibility:hidden). Proponuję (jak wielu innych wcześniej), aby bezwzględnie ustawić wejście i wyrzucić je z ekranu.

#uploadInput {
    position: absolute;
    left: -9999px;
}

— Potężna gumowa kaczka
źródło

1

+1 za to. Zauważyłem również, że można ukryć otaczający element, ale nie przycisk wprowadzania pliku, a następnie pokazać otaczający element, wyostrzyć przycisk, aktywować go, a następnie ukryć przycisk.

— Stevo

10

Sprawdź moje skrzypce.

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}

<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

Rozwiń fragment

— Mohan
źródło

9

adardesign przyłapał go na ignorowaniu elementu wejściowego pliku, gdy jest on ukryty. Zauważyłem również, że wiele osób zmienia rozmiar elementu na 0 lub wypycha go poza granice za pomocą regulacji pozycjonowania i przepełnienia. To wszystko są świetne pomysły.
Alternatywnym sposobem, który wydaje się działać doskonale, jest po prostu ustawienie krycia na 0 . Wtedy zawsze możesz po prostu ustawić pozycję, aby nie przesuwać innych elementów, tak jak robi to hide. Przesunięcie elementu o prawie 10 000 pikseli w dowolnym kierunku wydaje się po prostu trochę niepotrzebne.

Oto mały przykład dla tych, którzy go chcą:

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}

— eyegropram
źródło

7

Z ciekawości możesz zrobić coś takiego, jak chcesz, dynamicznie tworząc formularz przesyłania i plik wejściowy, bez dodawania ich do drzewa DOM:

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

Nie ma potrzeby dodawania uploadForm do DOM.

— jairhumberto
źródło

1

DZIĘKUJĘ CI! Szukałem tego od 20 minut!

— Labo,

5

Prawidłowy kod:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>

— E9 Sistemas
źródło

4

To celowo i zgodnie z projektem. To kwestia bezpieczeństwa.

— Chad Grant
źródło

4

Właściwie znalazłem na to naprawdę prostą metodę:

$('#fileinput').show().trigger('click').hide();

W ten sposób twoje pole wejściowe pliku może mieć właściwość css wyświetlaną na none i nadal wygrywać transakcję :)

— skywlkr
źródło

na wolniejszej maszynie może to być migotanie na ekranie. Nie jest to optymalne rozwiązanie

— Dmitry Efimenko

4

Jest za późno na odpowiedź, ale myślę, że ta minimalna konfiguracja działa najlepiej. Ja też szukam tego samego.

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// css

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

demo przycisków wprowadzania pliku bootstrap

— Natwar Singh
źródło

nigdy nie jest za późno na odpowiedź;)

— AGuyCalledGerald

Kilka lat później nadal najlepsza odpowiedź IMO

— DimmuR

4

To bardzo stara kwestia, ale niestety ta kwestia jest nadal aktualna i wymaga rozwiązania.

(Zaskakująco proste) rozwiązanie, które wymyśliłem, polega na „ukryciu” rzeczywistego pola wejściowego pliku i zawinięciu go w znacznik LABEL (może być oparty na Bootstrap i HTML5, w celu ulepszenia).

See here:Przykładowy kod tutaj

W ten sposób rzeczywiste pole wejściowe pliku jest niewidoczne, a wszystko, co widzisz, to dostosowany „przycisk”, który w rzeczywistości jest zmodyfikowanym elementem LABEL. Po kliknięciu tego elementu ETYKIETA pojawi się okno wyboru pliku, a wybrany plik przejdzie do pola wejściowego rzeczywistego pliku.

Ponadto możesz dowolnie manipulować wyglądem i zachowaniem (na przykład: pobrać nazwę wybranego pliku z pliku wejściowego pliku, po jego wybraniu i pokazać go gdzieś. Element LABEL nie robi tego automatycznie, oczywiście. Zwykle po prostu umieszczam go wewnątrz LABEL, jako jego treść tekstową).

Uważaj jednak! Manipulacja wyglądem i zachowaniem jest ograniczona do wszystkiego, co możesz sobie wyobrazić i o czym pomyśleć. ;-) ;-)

— TheCuBeMan
źródło

3

Udało mi się za pomocą prostego $ (...). Click (); z JQuery 1.6.1

— Valentin Galea
źródło

1

Hmm ciekawy, jak to zrobiłeś, na mojej stronie (www.iscriptdesign.com) wykonując $ ('file: input'). Click () nic nie robi, ani $ ('file: input'). Trigger (' Kliknij');

— dr jerry

Oto pełny przykład: <input type = "file" id = "picBrowse" ... a następnie $ ('# picBrowse'). Click ();

— Valentin Galea

Testowałem na cr (nie wiem, która wersja) na Mac OS, działa jednak na FF 4 na XP. Dzięki!

— dr jerry

3

albo po prostu

$(':input[type="file"]').show().click().hide();

— Otvazhnii
źródło

2

miałem problemy z niestandardową walidacją po stronie klienta <input type="file"/>podczas używania fałszywego przycisku, aby go uruchomić, a rozwiązanie @Guillaume Bodi działało dla mnie (również opacity: 0;na Chrome)

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

i styl CSS do przesyłania danych

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

— Amin K.
źródło

1

Spróbuj tego, to hack. pozycja: bezwzględna dotyczy przeglądarki Chrome, a wyzwalacz („zmiana”) dotyczy przeglądarki IE.

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

— thinpiglin
źródło

Zwróć na to uwagę $.browser jest przestarzały w nowszych wersjach jQuery

— Kevin Beal

1

Mój problem był trochę inny na iOS 7. Okazuje się, że FastClick powodował problemy. Wszystko, co musiałem zrobić, to dodać class="needsclick"do mojego przycisku.

— Dex
źródło

0

To prawdopodobnie najlepsza odpowiedź, biorąc pod uwagę problemy z różnymi przeglądarkami.

CSS:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

JS:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

HTML:

<a class="file-upload">Upload</a>
<input type="file" name="file">

— Eddsters
źródło

0

Myślę, że rozumiem twój problem, bo mam podobny. Więc tag <label>ma atrybut dla, możesz użyć tego atrybutu, aby połączyć swoje wejście z type = "file". Ale jeśli nie chcesz aktywować tego za pomocą tej etykiety, ponieważ jakaś reguła twojego układu, możesz zrobić w ten sposób.

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});

.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>

Rozwiń fragment

Oczywiście dostosujesz to do własnego celu i układu, ale to jest łatwiejszy sposób, w jaki wiem, aby to działało !!

— Leonardo Lindroth
źródło

-1

Na podstawie odpowiedzi Guillaume Bodi zrobiłem to:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

co oznacza, że jest ukryty na początku, a następnie wyświetlany dla wyzwalacza, a następnie natychmiast ponownie ukryty.

— Stevo
źródło