[JavaScript] Zmiana wartości obecnego spana w locie z inputem Opcje

[shpaque]

Witam serdecznie, gdzieś coś przeoczam (takie słowo lub neologizm (IMG:style_emoticons/default/wink.gif) ) ciągle. Mam inputa zasłoniętego spanem

[HTML] pobierz, plaintext 
<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 
if ($('#photoFront')[0].files.length > 0) {
	$('#spanFront').html('Zmień plik <input id="photoFront" name="photoFront" type="file" />');
}
[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 
<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 
function checkFile() {
	var x = document.getElementById('photoFront');
	if ('files' in x) {
		if (x.files.length > 0) {
			document.getElementById('spanFront').innerHTML = 'Zmień plik <input id="photoFront" name="photoFront" type="file" onchange="checkFile()" />';
		}
	}
}
[HTML] pobierz, plaintext 

#EDIT 2

ok to teraz mam problem już (IMG:style_emoticons/default/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 
<div class="row">
			<div class="col-sm-4">
				<div class="panel">
					<div class="u-image" style="background-image: url('./img/photoFront.jpg');"></div>
					<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>
					<span id="spanFront" class="btn-file text-center">Dodaj <input id="photoFront" name="photoFront" type="file" onchange="checkFile('spanFront', 'photoFront')" /></span>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="panel">
					<div class="u-image" style="background-image: url('./img/photoSide.jpg');"></div>
					<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>
					<span id="spanSide" class="btn-file text-center">Dodaj <input id="photoSide" name="photoSide" type="file" onchange="checkFile('spanSide', 'photoSide')" /></span>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="panel">
					<div class="u-image" style="background-image: url('./img/photoBack.jpg');"></div>
					<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>
					<span id="spanBack" class="btn-file text-center">Dodaj <input id="photoBack" name="photoBack" type="file" onchange="checkFile('spanBack', 'photoBack')" /></span>
				</div>
			</div>
		</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script>
function checkFile($span, $photo) {
	var x = document.getElementById($photo);
	if ('files' in x) {
		if (x.files.length > 0) {
			document.getElementById($span).innerHTML = 'Zmień plik<br><small>(' + x.files[0].name + ')</small> <input id="photoFront" name="photoFront" type="file" onchange="checkFile(\'' + $span + '\', \'' + $photo + '\')" />';
		}
	}
}
</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 
<script>
function checkFile($span, $photo) {
	var x = document.getElementById($photo);
	if ('files' in x) {
		if (x.files.length > 0) {
			document.getElementById($span).innerHTML = 'Zmień plik<br><small>(' + x.files[0].name + ')</small> <input id="' + $photo + '" name="' + $photo + '" type="file" onchange="checkFile(\'' + $span + '\', \'' + $photo + '\')" />';
		}
	}
}
</script>
[HTML] pobierz, plaintext 

pogadałem, pogadałem - teraz mozna zamknąć (IMG:style_emoticons/default/smile.gif)

[shpaque]

no w końcu ktoś odpowiedział (IMG:style_emoticons/default/wink.gif)
wiem, tak z rozpedu wale z php (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/smile.gif) , oto kod:

[HTML] pobierz, plaintext 
<div class="col-sm-4">
				<div class="panel">
					<div id="imageFront" class="u-image" style="background-image: url('./img/photoFront.jpg');"></div>
					<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>
					<span id="spanFront" class="btn-file text-center">Dodaj <input id="photoFront" name="photoFront" type="file" onchange="checkFile('imageFront', 'spanFront', 'photoFront')" /></span>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="panel">
					<div id="imageSide" class="u-image" style="background-image: url('./img/photoSide.jpg');"></div>
					<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>
					<span id="spanSide" class="btn-file text-center">Dodaj <input id="photoSide" name="photoSide" type="file" onchange="checkFile('imageSide', 'spanSide', 'photoSide')" /></span>
				</div>
			</div>
			<div class="col-sm-4">
				<div class="panel">
					<div id="imageBack" class="u-image" style="background-image: url('./img/photoBack.jpg');"></div>
					<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>
					<span id="spanBack" class="btn-file text-center">Dodaj <input id="photoBack" name="photoBack" type="file" onchange="checkFile('imageBack', 'spanBack', 'photoBack')" /></span>
				</div>
			</div>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<script>
function checkFile(image, span, photo) {
	var x = document.getElementById(photo);
	if ('files' in x) {
		if (x.files.length > 0) {
			document.getElementById(image).style.backgroundImage = 'url(\'' + window.URL.createObjectURL(x.files[0]) + '\')';
			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 + '\')" />';
		}
	}
}
</script>
[HTML] pobierz, plaintext