Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    Post input file con label

    Salve a tutti ho creato un form di upload con un input file a cui ho modificato l'estetica aggiungendo incorporandolo in una label

    codice HTML:
    <label class="fileContainer" style="color: white" id="FileNameLabel">      
    Seleziona un file       
    <input type="file" name="UpFile"/>
    </label>                                           
    A questo si aggiunge uno script in js per modificare il nome della label ogni volta che viene selezionato un file

    codice HTML:
    $(document).ready(function(){            
    $('input[type="file"]').change(function(e){                
    var fileName = e.target.files[0].name;                
    document.getElementById('FileNameLabel').innerHTML = fileName;            
    });        
    });
    Ora, lanciando il form, il quale reindirizza ad una pagina .php con $_FILES['UpFile'] mi restituisce un "Undefined index".

    Provando poi a togliere il file input dalla label lo script funziona tranquillamente e l'upload va a buon fine.

    Cosa sbaglio?
    Grazie a tutti in anticipo!

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,753
    Ciao, penso che il problema sia qui:
    codice:
    getElementById('FileNameLabel').innerHTML = ...
    La proprietà innerHTML rappresenta tutto ciò che sta dentro l'elemento a cui questa è riferita.
    Tenendo conto che l'elemento <input> sta dentro quell'elemento <label>, se tu modifichi quella proprietà è ovvio che l'elemento <input> (con tutti i dati del file appena scelto) va a farsi benedire.

    Chiaramente in tal caso è abbastanza logico che tu riceva un valore del tipo undefined, perché quell'elemento <input> non esisterà più dal momento che lo hai rimosso dal flusso dei contenuti html, sostituendolo con dell'altro.

    Per risolvere potresti usare un terzo elemento contenitore (può andar bene un semplice <span>) in modo da mostrare qui il nome del file appena scelto.

    Potrebbe essere una cosa del genere:

    codice:
    <label class="fileContainer" style="color: white" id="FileNameLabel">
       <span id="FileName">Seleziona un file</span>
       <input type="file" name="UpFile"/>
    </label>
    ...
    <script>
    $(document).ready(function(){
       $('input[type="file"]').change(function(e){
          var fileName = e.target.files[0].name;
          document.getElementById('FileName').innerHTML = fileName;
       });
    });
    In sostanza quello che viene modificato è solo il contenuto dello <span> e non quello di tutto il <label>, per cui l'elemento <input> (con il suoi dati relativi al file scelto) viene preservato.

    Se poi ti interessa "nascondere" l'elemento <input> una volta che è stato scelto un file, non puoi rimuoverlo dal flusso dei contenuti ma puoi usare delle soluzioni alternative.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web.
    Ti resta... humm spè

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.