Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][CSS] pole input type="file"
Forum PHP.pl > Forum > Przedszkole
mtskilla
20.07.2010, 15:02:07
Witam

Czy da się jakoś zrobic aby po dodaniu pliku przez pole input type=file w polu formularza widoczna
byla nie cala sciezka dostepu do pliku tylko sama nazwa dodanego pliku??

pozdrawiam
kapuch
20.07.2010, 15:06:42 
[PHP] pobierz, plaintext 
  1. basename();
[PHP] pobierz, plaintext
mtskilla
20.07.2010, 15:32:25
dzieki wielkie ale nie mam zielonego pojecia jak tego uzyc skoro po do daniu od pliku przez pole input file nie ma żadnej zmiennej do ktorej moznaby odwolac basename();
nie czaje tego...

moze jeszcze jakies male naprowadzenie...
kapuch
20.07.2010, 15:46:32 
[HTML] pobierz, plaintext 
  1. <form method="post">
  2. <input type="file" name="plik" />
  3. <input type="submit" value="ok" />
  4. </form>
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
  1. echo basename($_POST['plik']);
[PHP] pobierz, plaintext

mtskilla
20.07.2010, 15:57:49
no tak ale z tego co widze to Twoja metoda działa dopiero po przesłaniu pliku przez formularz post. a mi chodzi o cos takiego,
ze w momencie klikniecia w przycisk przegladaj i dodania czegos to w polu input type=file pokazuje się sciezka do pliku (przed wyslaniem formularza)
a ja bym chcial zeby pokazalo się tylko nazwa pliku..

mysle, ze js to zalatwi.. ale niestety nie wiem jak..

nie wiem czy odpalales kiedys strone z formularzem w przegladarce google chrom - jest to jedyna przegladarka ktora ma to ustawione domyslnie - pokazuje tylko nazwe zaladowanego pliku..
reszta ff, ie czy opera wszedzie w polu input file pokazuje sciezke dostępu..
kapuch
20.07.2010, 16:09:09
A ja mysle ze tak to sie nie da zrobic, chyba ze przegladarka dopuszcza taka mozliwosc.
Jak zmienisz wartosc (o ile ci sie uda), tego pola to jak pozniej przeslesz plik?
Skad skrypt bedzie znal calkowita sciezke do tego pliku, skoro przekazesz mu tylko nazwe samego pliku?
W google chrome najprawdopodobniej ten input ma wbudowana funkcje, ktora przechowuje nazwe skrocona (do wyswietlania w polu) i nazwe calkowita (dla skryptu), a jesli ff i inne tego nie obsluguja, to jakiekolwiek kombinacje przy value tego pola, skoncza sie bledem skryptu.
To jest moje zdanie.

Jesli dalo by sie jednak to zrobic w js, to jakos tak:
[JAVASCRIPT] pobierz, plaintext 
  1. function basename(path) {
  2.     return path.replace(/\\/g,'/').replace( /.*\//, '' );
  3. } 
[JAVASCRIPT] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. <input type="file" name="plik" onchange="this.value=basename(this.value);" />
[HTML] pobierz, plaintext

Ale to nie dziala - sprawdzalem, tzn dziala bo jak wstawisz alert w ta funkcje basename to pokazuje okrojona nazwe, ale nie przepisuje jej do pola w input - prawdopodobnie dlatego, ze jest to zablokowane.

PS. Tak samo w Chrome, albo Operze (zapomnialem juz) masz textarea, ktore mozesz sobie recznie powiekszac/zmniejszac, a ff tego nie ma :/
#luq
20.07.2010, 16:35:27
@kapuch ma rację to kwestia implementacji obiektu input[type=file] przeglądarki. Przypisanie takie jest zablokowane z powodu bezpieczeństwa. Wyobraźmy sobie, że jest formularz na stronie i ma ukryte pole [type=file] które jest po załadowaniu skryptowo wypełniane ścieżką np. "C:/Windows/..." po kliknięciu na sumbita ten plik jest przesyłany na serwer, pomijając o tym wiedzę usera.

Możesz przecież nałożyć absolutnie/relatywnie na ten input niewidocznego div`a i po wypełnieniu pola wpisywać w niego basname i ustawiać go jako widoczny winksmiley.jpg
mtskilla
20.07.2010, 16:53:02
Cytat(kapuch @ 20.07.2010, 17:09:09 ) *
PS. Tak samo w Chrome, albo Operze (zapomnialem juz) masz textarea, ktore mozesz sobie recznie powiekszac/zmniejszac, a ff tego nie ma :/


w chromie mozna zmieniac textarea..



#luq a czy jest możliwe sprawdzenie czy pole input jest wypelnione? (czy zostal wybrany obrazek) bez odswiezania calego formularza? bo chociaz to nie problem
to wolalbym az tak nie kombinowac.
zrobilbym to na zasadzie onchange="document.form.submit()">
da sie jakos inaczej? bez odswiezania?


wielkie dzieki za pomoc chlopaki smile.gif


#luq
20.07.2010, 17:11:02
To co chcesz zrobić da się zrobić w taki sposób:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.   <head>
  4.     <title>Disable</title>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6. 	<script type="text/javascript" src="./js/jquery.js"></script>
  7.  
  8. 	<script type="text/javascript">
  9. 		function basename(path) {
  10. 			return path.replace(/\\/g,'/').replace( /.*\//, '' );
  11. 		} 
  12.  
  13. 		$(document).ready(function(){
  14. 			$('#foo').change(function(){
  15. 				var v = $(this).val();
  16.  
  17. 				$('#foo_basname').text( basename( v ) );
  18. 				$('#foo_basname').show();
  19. 			});
  20. 		});
  21. 	</script>
  22.  
  23.   </head>
  24. <body>
  25.  
  26. 	<form action="" method="post">
  27. 		<input style="width: 200px; height: 20px; border: 1px solid #000;" type="file" id="foo" name="foo" />
  28. 		<div id="foo_basname" style="background: #fff; width: 145px; height: 20px; position: relative; top: -20px; display: none;"></div>
  29. 	</form>
  30.  
  31. </body>
  32. </html>
[HTML] pobierz, plaintext


Tylko ładnie ostylować inputa i tego div`a żeby wyglądało tak samo i nikt tego nie zauważy.
mtskilla
20.07.2010, 17:52:47
Wszystko ok takie rozwiązanie ma dwa minusy:

pierwszy- w kazdej przegladarce pole input file wyglada inaczej.. rozni sie szerokoscią i poprostu jest to nie do ogarniecia. trzebaby zastosowac styl css na if dla kazdej przegladarki zeby ladnie przykryc
pole input tym drugim divem - tak zeby byl widoczny przycisk (przegladaj / wybierz etc - rowniez zalezne od przegladarki..) nie wspomne o chromie w ktorym przycisk przedladania przeskakuje na lewą strone...

tak czy siak wybrnąłem z tego problemu i postanowiłem zrobic diva który bedzie przykrywał całe to pole - łącznie z przyciskiem do przeglądania..

ale tutaj pojawia się drugi problem jaki napotkałem.. mianowicie przy wiekszej ilosci pol input file div przykrywajacy pojawia sie tak czy siak tylko raz...

chyba przeprosze w koncu multiple-file-upload z jquery...
nie chcialem w to wchodzic bo nie bardzo rozumiem zasade jak te pliki dodane
tym sposbem są nazywane - zeby potem zrobic z nich miniaturki i zapisac gdzies tam na serwerze
http://www.fyneworks.com/jquery/multiple-file-upload/
mieliscie moze z tym doczynienia?

#luq
20.07.2010, 18:14:01
1. Tak jak powiedziałem, trzeba to ostylować. Chyba input[type=file] jest oporny na style ale pewno się da jakoś JavaScriptem to załatwić.
2. No bo musisz zrobić dla każdego inputa inny div. No to jest chyba logiczne.
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.