Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Zmiana wartości obecnego spana w locie z inputem
Forum PHP.pl > Forum > Przedszkole
shpaque
19.09.2018, 11:31:12
Witam serdecznie, gdzieś coś przeoczam (takie słowo lub neologizm wink.gif) ciągle. Mam inputa zasłoniętego spanem

[HTML] pobierz, plaintext 
  1. <span id="spanFront" class="btn-file text-center">Dodaj <input id="photoFront" name="photoFront" type="file" /></span>
[HTML] pobierz, plaintext


no i po załączeniu pliku chcialbym zeby cos w tym spanie sie zmienilo, bo mimo ze dodje zdjecie to nie wiem czy jest, cz nie ma, wiec dodalem

[HTML] pobierz, plaintext 
  1. if ($('#photoFront')[0].files.length > 0) {
  2. 	$('#spanFront').html('Zmień plik <input id="photoFront" name="photoFront" type="file" />');
  3. }
[HTML] pobierz, plaintext


konsola pusta, to rowniez znaczy ze w ogole nie dziala - tylko gdzie i dlaczego?

@EDIT

działa natomiast jako funkcja w pureJS, a jak to przerobic na jquery?

[HTML] pobierz, plaintext 
  1. <span id="spanFront" class="btn-file text-center">Dodaj <input id="photoFront" name="photoFront" type="file" onchange="checkFile()" /></span>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
  1. function checkFile() {
  2. 	var x = document.getElementById('photoFront');
  3. 	if ('files' in x) {
  4. 		if (x.files.length > 0) {
  5. 			document.getElementById('spanFront').innerHTML = 'Zmień plik <input id="photoFront" name="photoFront" type="file" onchange="checkFile()" />';
  6. 		}
  7. 	}
  8. }
[HTML] pobierz, plaintext


#EDIT 2

ok to teraz mam problem już smile.gif

wyjaśniam: kod, który podam poniżej jest już taki jaki sobie chciałem napisać, natomiast o ile w pierwszym przypadku (photoFront i spanFront) mogę sobie wielorazowo zmieniać plik i jego nazwa jest updateowana fajnie, nie mogę tego samego zrobić w przypadku 2 (Side) i 3 (Back). Tzn, jak zalacze plik jest ok, ale jak juz go chce zmienic, wywalaja mi bledy w konsoli:

index.php?page=dodaj-pomiar:587 Uncaught TypeError: Cannot use 'in' operator to search for 'files' in null
at checkFile (index.php?page=dodaj-pomiar:587)
at HTMLInputElement.onchange (index.php?page=dodaj-pomiar:1)


[HTML] pobierz, plaintext 
  1. <div class="row">
  2. 			<div class="col-sm-4">
  3. 				<div class="panel">
  4. 					<div class="u-image" style="background-image: url('./img/photoFront.jpg');"></div>
  5. 					<div class="title text-justify" style="margin-top: 12px; font-size: 13px; line-height: 16px;"><b>Zdjęcie od przodu</b><br><br>Pamiętaj, że nie musisz pokazywać swojej twarzy, ważne jest aby oświetlenie było odpowiednie.</div>
  6. 					<span id="spanFront" class="btn-file text-center">Dodaj <input id="photoFront" name="photoFront" type="file" onchange="checkFile('spanFront', 'photoFront')" /></span>
  7. 				</div>
  8. 			</div>
  9. 			<div class="col-sm-4">
  10. 				<div class="panel">
  11. 					<div class="u-image" style="background-image: url('./img/photoSide.jpg');"></div>
  12. 					<div class="title text-justify" style="margin-top: 12px; font-size: 13px; line-height: 16px;"><b>Zdjęcie od boku</b><br><br>Nie napinaj brzucha ani nie nabieraj za dużo powietrza. Zachowaj prostą postawę.</div>
  13. 					<span id="spanSide" class="btn-file text-center">Dodaj <input id="photoSide" name="photoSide" type="file" onchange="checkFile('spanSide', 'photoSide')" /></span>
  14. 				</div>
  15. 			</div>
  16. 			<div class="col-sm-4">
  17. 				<div class="panel">
  18. 					<div class="u-image" style="background-image: url('./img/photoBack.jpg');"></div>
  19. 					<div class="title text-justify" style="margin-top: 12px; font-size: 13px; line-height: 16px;"><b>Zdjęcie od tyłu</b><br><br>Napnij przy okazji ręce i pokaż się w całej okazałości.<br><br></div>
  20. 					<span id="spanBack" class="btn-file text-center">Dodaj <input id="photoBack" name="photoBack" type="file" onchange="checkFile('spanBack', 'photoBack')" /></span>
  21. 				</div>
  22. 			</div>
  23. 		</div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <script>
  2. function checkFile($span, $photo) {
  3. 	var x = document.getElementById($photo);
  4. 	if ('files' in x) {
  5. 		if (x.files.length > 0) {
  6. 			document.getElementById($span).innerHTML = 'Zmień plik<br><small>(' + x.files[0].name + ')</small> <input id="photoFront" name="photoFront" type="file" onchange="checkFile(\'' + $span + '\', \'' + $photo + '\')" />';
  7. 		}
  8. 	}
  9. }
  10. </script>
[HTML] pobierz, plaintext


#EDIT LAST

dziękuję za wysłuchanie mojego monologu i pomoc, oczywiscie nie zauwazylem podstawowego bledu jaki zrobilem, czyli powinno byc tak w skrypcie:

[HTML] pobierz, plaintext 
  1. <script>
  2. function checkFile($span, $photo) {
  3. 	var x = document.getElementById($photo);
  4. 	if ('files' in x) {
  5. 		if (x.files.length > 0) {
  6. 			document.getElementById($span).innerHTML = 'Zmień plik<br><small>(' + x.files[0].name + ')</small> <input id="' + $photo + '" name="' + $photo + '" type="file" onchange="checkFile(\'' + $span + '\', \'' + $photo + '\')" />';
  7. 		}
  8. 	}
  9. }
  10. </script>
[HTML] pobierz, plaintext


pogadałem, pogadałem - teraz mozna zamknąć smile.gif
nospor
19.09.2018, 11:32:59
to zeby to nie byl tylko monolog to wiesz, ze zmienne w js nie musza zaczynac sie od $ ?
shpaque
19.09.2018, 16:48:24
no w końcu ktoś odpowiedział wink.gif
wiem, tak z rozpedu wale z php smile.gif

ok ale jeszcze zapytan, jak moge zrobic zeby np w locie zmienil mi sie obrazek na ten uploadowany? sciezki przeciez nie bedzie mial zadnej, ale generalnie jaka jest procedura?

kończę monolog smile.gif, oto kod:

[HTML] pobierz, plaintext 
  1. <div class="col-sm-4">
  2. 				<div class="panel">
  3. 					<div id="imageFront" class="u-image" style="background-image: url('./img/photoFront.jpg');"></div>
  4. 					<div class="title text-justify" style="margin-top: 12px; font-size: 13px; line-height: 16px;"><b>Zdjęcie od przodu</b><br><br>Pamiętaj, że nie musisz pokazywać swojej twarzy, ważne jest aby oświetlenie było odpowiednie.</div>
  5. 					<span id="spanFront" class="btn-file text-center">Dodaj <input id="photoFront" name="photoFront" type="file" onchange="checkFile('imageFront', 'spanFront', 'photoFront')" /></span>
  6. 				</div>
  7. 			</div>
  8. 			<div class="col-sm-4">
  9. 				<div class="panel">
  10. 					<div id="imageSide" class="u-image" style="background-image: url('./img/photoSide.jpg');"></div>
  11. 					<div class="title text-justify" style="margin-top: 12px; font-size: 13px; line-height: 16px;"><b>Zdjęcie od boku</b><br><br>Nie napinaj brzucha ani nie nabieraj za dużo powietrza. Zachowaj prostą postawę.</div>
  12. 					<span id="spanSide" class="btn-file text-center">Dodaj <input id="photoSide" name="photoSide" type="file" onchange="checkFile('imageSide', 'spanSide', 'photoSide')" /></span>
  13. 				</div>
  14. 			</div>
  15. 			<div class="col-sm-4">
  16. 				<div class="panel">
  17. 					<div id="imageBack" class="u-image" style="background-image: url('./img/photoBack.jpg');"></div>
  18. 					<div class="title text-justify" style="margin-top: 12px; font-size: 13px; line-height: 16px;"><b>Zdjęcie od tyłu</b><br><br>Napnij przy okazji ręce i pokaż się w całej okazałości.<br><br></div>
  19. 					<span id="spanBack" class="btn-file text-center">Dodaj <input id="photoBack" name="photoBack" type="file" onchange="checkFile('imageBack', 'spanBack', 'photoBack')" /></span>
  20. 				</div>
  21. 			</div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <script>
  2. function checkFile(image, span, photo) {
  3. 	var x = document.getElementById(photo);
  4. 	if ('files' in x) {
  5. 		if (x.files.length > 0) {
  6. 			document.getElementById(image).style.backgroundImage = 'url(\'' + window.URL.createObjectURL(x.files[0]) + '\')';
  7. 			document.getElementById(span).innerHTML = 'Zmień plik<br><small>(' + x.files[0].name + ')</small> <input id="' + photo + '" name="' + photo + '" type="file" onchange="checkFile(\'' + image + '\', \'' + span + '\', \'' + photo + '\')" />';
  8. 		}
  9. 	}
  10. }
  11. </script>
[HTML] pobierz, plaintext
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.