Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript] Zmiana wartości obecnego spana w locie z inputem
shpaque
post 19.09.2018, 11:31:12
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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

  1. <span id="spanFront" class="btn-file text-center">Dodaj <input id="photoFront" name="photoFront" type="file" /></span>


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

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


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?

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

  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. }


#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)


  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>


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


#EDIT LAST

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

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


pogadałem, pogadałem - teraz mozna zamknąć smile.gif
Go to the top of the page
+Quote Post
nospor
post 19.09.2018, 11:32:59
Post #2





Grupa: Moderatorzy
Postów: 36 440
Pomógł: 6290
Dołączył: 27.12.2004




to zeby to nie byl tylko monolog to wiesz, ze zmienne w js nie musza zaczynac sie od $ ?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 19.09.2018, 16:48:24
Post #3





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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:

  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>


  1. function checkFile(image, span, photo) {
  2. var x = document.getElementById(photo);
  3. if ('files' in x) {
  4. if (x.files.length > 0) {
  5. document.getElementById(image).style.backgroundImage = 'url(\'' + window.URL.createObjectURL(x.files[0]) + '\')';
  6. 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 + '\')" />';
  7. }
  8. }
  9. }
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 12:37