wyzwalacz jquery: w jaki sposób można wywołać plik przeglądania w danych wejściowych po kliknięciu łącza tekstowego?

Question

Po tym numerze post mam innego wystawcę - w jaki sposób mogę wywołać plik przeglądania w danych wejściowych po kliknięciu linku tekstowego?

Zasadniczo chcę ukryć formularz, ale zostanie on uruchomiony po kliknięciu odsyłanego łącza tekstowego.

<a href="#" class="upload">upload</a> 
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm" style="display:none;"> 
    <input type="file" multiple="multiple" name="file[]" /> 
    <input type="submit" name="upload" value="Submit"/> 
</form> 
<div id="output"></div> 

To jest moja praca kod JavaScript:

$(document).ready(function(){ 
    $('.upload').click(function(){ 
     $(this).trigger($('input[type=file]')); 
     return false; 
    }); 

    $('input[type=file]').change(function() { 
     $('#myForm').ajaxSubmit({ 
       target: '#output' 
     }); 
    }); 
}); 

Answer 1

Nie można używać style="display:none;" użytkowania style="visibility:hidden;"

i zmieniłem spust kliknij:

$('.upload').click(function(){ 
    $('input[type=file]').click(); 
    return false; 
}); 

---

Reas oning:

Pola wejściowe nie zostaną przesłane do serwera z display:none, ale będą z numerem visibility:hidden.

Answer 2

Metoda Joe'a jest poprawna. Jednak to rozwiązanie będzie działać tylko w niektórych przeglądarkach. Działa w przeglądarce Chrome i Firefox, ale nie w przeglądarce Opera, Safari ani w wbudowanej przeglądarce Android Galaxy S (przetestowano ją na aktualnych wersjach od 23 czerwca 2012 r.). Te przeglądarki prawdopodobnie wyłączają wyzwalanie przycisku przesyłania za pośrednictwem JS ze względów bezpieczeństwa.

będę aktualizować ten post, jeśli znajdę rozwiązanie, które działa we wszystkich nowoczesnych przeglądarkach

Answer 3

dlaczego nie można używać zamiast etykiety? wtedy możesz użyć atrybutu for.

<style type="text/css"> 
    #file_upload { 
    visibility: hidden; 
    } 
</style> 
<a href="#" class="upload"> 
    <label for="file_upload">upload</label 
</a> 
<form action="upload.php" method="post" enctype="multipart/form-data" id="myForm"> 
    <input id="file_upload" type="file" multiple="multiple" name="file[]" /> 
    <input type="submit" name="upload" value="Submit"/> 
</form> 
<div id="output"></div>