Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [JavaScript] Zmiana wartości obecnego spana w locie z inputem

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


[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  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<http://december.com/html/4/element/br.html><http://december.com/html/4/element/small.html>(' + x.files[0].name + ')</http://december.com/html/4/element/small.html> <http://december.com/html/4/element/input.html id="photoFront" name="photoFront" type="file" onchange="checkFile(\'' + $span + '\', \'' + $photo + '\')" />';
  7. 		}
  8. 	}
  9. }
  10. </http://december.com/html/4/element/script.html>
[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. <http://december.com/html/4/element/script.html>
  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<http://december.com/html/4/element/br.html><http://december.com/html/4/element/small.html>(' + x.files[0].name + ')</http://december.com/html/4/element/small.html> <http://december.com/html/4/element/input.html id="' + $photo + '" name="' + $photo + '" type="file" onchange="checkFile(\'' + $span + '\', \'' + $photo + '\')" />';
  7. 		}
  8. 	}
  9. }
  10. </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext


pogadałem, pogadałem - teraz mozna zamknąć smile.gif

Napisany przez: 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 $ ?

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


[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/script.html>
  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<http://december.com/html/4/element/br.html><http://december.com/html/4/element/small.html>(' + x.files[0].name + ')</http://december.com/html/4/element/small.html> <http://december.com/html/4/element/input.html id="' + photo + '" name="' + photo + '" type="file" onchange="checkFile(\'' + image + '\', \'' + span + '\', \'' + photo + '\')" />';
  8. 		}
  9. 	}
  10. }
  11. </http://december.com/html/4/element/script.html>
[HTML] pobierz, plaintext

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)