Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Wyczyszczenie tylko jednego pola typu FILE z formularza
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
kodif
Witam

Mam problem z formularzem, są w nim pola tekstowe, jest textarea i są trzy pola wyboru plików do wysłania na serwer.
Pliki są opcjonalne, można je wysyłać bądź nie.

Czasami uzytkownik pomyli się i wybierając plik kliknie nie to co trzeba, lub wybierze plik a potem jednak chce zrezygnować z dołączenia danego pliku do wysyłanego formularza.

Jak można usunąc tylko jeden wybrany plik w formularzu, nie kasując całości?

Wstawiłem dodatkowy button z funkcją czyszczenia konkretnego pola (w poniższym przykładzie pola tekstowego "opis1"), ale nie działa na type="file"

kod (uproszczony) wygląda tak

  1. function cfile(){
  2. document.getElementById('myform').opis1.value='';
  3. return true;
  4. }
  5.  
  6. <form name="myform" id="myform" enctype="multipart/form-data" method="post" [.....] />
  7. <input name="title" type="text" value=""/>
  8. <input name="opis1" type="text" value=""/>
  9. <textarea name="bdy" />
  10.  
  11. <input name="plik_upload[]" type="file" class="main" value="" size="60">
  12.  
  13. <input type="button" name="clearfile" value="kasuj" onclick="cfile()"/><br>
  14. ....
  15.  


co trzeba wstawić do funkcji cfile żeby niechciany wybór pliku zniknął?

Już sobie poradziłem

O ile przy
Cytat
<input name="opis1" type="text" value=""/>

nie jest wymagane id pola bo i tak
Cytat
document.getElementById('myform').opis1.value

znajdzie właściwy element to w przypadku tablic id okazało się być konieczne

czyli ma być

  1. <input name="plik_upload[]" id="plik1" type="file" class="main" value="" size="60">
  2.  
  3. a w funkcji cfile
  4. document.getElementById('myform').plik1.value



A jak to zrobic aby przekazać różne id do funkcji cfile?
Abaddor
Rozumiem że po dodaniu pliku tworzyć albo pokazujesz kolejny input file?

Wiec czemu ich nie ponumerujesz?
Aby było:
  1. <input name="plik_upload[0]" id="file-0" type="file" class="main" value="" size="60">
  2. <input name="plik_upload[1]" id="file-1" type="file" class="main" value="" size="60">
  3. <input name="plik_upload[2]" id="file-2" type="file" class="main" value="" size="60">


Wtedy możesz zarządzać każdym bez problemu:)

Przy dodaniu kolejengo pola, sprawdzasz jaki jest najwyższy ID i dodajesz kolejny, w tym wypadku 4,5,6 smile.gif
kodif
Nie, nie tworzę kolejnego input file, są w formularzu od razu. Moim problemem jest wyczyszczenie dowolnego input file bez wyczyszczenia całości formularza. Już wiem że ponumerowane id jest mi potrzebne, natomiast (raczkuje w JS) nie wiem jak skonstruować funkcję i jej parametry aby otrzymać takie coś

  1. function cfile(questionmark.gif){
  2. document.getElementById('myform').questionmark.gif.value='';
  3. return true;
  4. }
  5.  
  6. <input name="plik_upload[0]" id="file-0" type="file" class="main" value="" size="60">
  7. <input type="button" name="clearfile" value="kasuj" onclick="cfile(file-0)"/>
  8.  
  9. <input name="plik_upload[1]" id="file-1" type="file" class="main" value="" size="60">
  10. <input type="button" name="clearfile" value="kasuj" onclick="cfile(file-1)"/>
  11.  
  12. <input name="plik_upload[2]" id="file-2" type="file" class="main" value="" size="60">
  13. <input type="button" name="clearfile" value="kasuj" onclick="cfile(file-2)"/>
Abaddor
  1.  
  2. document.getElementById('file-2').value = '';
  3.  
kodif
Dziękuje, wystarczyło pominąc 'myform' smile.gif

Walki ciąg dalszy. Taki oto kod działa i wykonuje się w FF, natomiast w IE oraz Operze nie.
Jakies podpowiedzi dlaczego?

FF 10, IE8, Opera11


  1. function cfile(id){
  2. document.getElementById(id).value='';
  3. return true;
  4. }
  5.  
  6.  
  7. <form name="myform" id="myform" enctype="multipart/form-data" method="post" action="k.php"/>
  8. <input name="title" type="text" value="dxsdsds"/>
  9. <input name="opis1" type="text" value="opis1 sdsavdwfed"/><br>
  10. <input name="plik_upload[]" id="plik1" type="file" class="main" value="" size="60" />
  11. <input type="button" name="clearfile" value="kasuj" onclick="cfile('plik1')"/><br>
  12. <input name="plik_upload[]" id="plik2" type="file" class="main" value="" size="60" />
  13. <input type="button" name="clearfile" value="kasuj" onclick="cfile('plik2')"/><br>
  14. <input name="plik_upload[]" id="plik3" type="file" class="main" value="" size="60" />
  15. <input type="button" name="clearfile" value="kasuj" onclick="cfile('plik3')"/><br>
  16. <br>
  17. </form>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.