czwartek, 4 września 2014

jQuery: czyszczenie pola file na przycisk

Natrafiłem ostatnio na ciekawy problem. W aplikacji musiałem zrobić przycisk czyszczenia pola wysyłania pliku. Co dziwne, nie jest to wcale takie proste. Poniżej zamieszczam znalezione rozwiązanie i opis.

Kod do wykonania tego zadania jest prosty, ale sposób rozwiązania jest co nieco pokrętny. Poniżej zamieszczony jest kod jQuery.
$('#clear-upload').live('click', function() {
    var file = $('#upload-0');
    file.replaceWith(file.val('').clone(true));
});
Pierwotnie myślałem, że wystarczy do elementu pusta wartość przypisać. Niestety okazało się, że nie było to wystarczające. Później zacząłem szukać bardziej złożonych rozwiązań. Jedno z nich zakładało owrapowanie elementu file w oddzielny formularz, zresetowanie formularza, a na koniec usunięcie owrapowania. O dziwo to rozwiązanie działało tylko na jednej z przeglądarek i to nie na najpopularniejszej wśród użytkowników.

Rozwiązanie, które zadziałało to skopiowanie elementu file po usawieniu pustej wartości, a następnie zastąpienie oryginalnego elementu przez jego kopię. Na szczęście udało się wykonać tą operację w jednej linii kodu.

Na koniec jeszcze takie małe wyjaśnienie. W projekcie jest wykorzystane jQuery 1.6.2 przez co kod może nie być w pełni zgodny z nowszymi wersjami i może wymagać drobnych zmian.

Brak komentarzy:

Prześlij komentarz