jQuery: ottiene il nome del file selezionato da <input type = "file" />

90

Questo codice dovrebbe funzionare in IE (non provarlo nemmeno in Firefox), ma non funziona. Quello che voglio è visualizzare il nome del file allegato. Qualsiasi aiuto?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>

Controlla la mia risposta, credo che sia il modo migliore e più comprensibile per raggiungere questo obiettivo.

— James111

147

È semplice come scrivere:

$('input[type=file]').val()

Ad ogni modo, suggerisco di utilizzare l'attributo name o ID per selezionare il tuo input. E con l'evento, dovrebbe assomigliare a questo:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});

— Pensatore
fonte

Grazie! Ha funzionato sul problema precedente (e semplificato) che ho posto, ma non funziona sulla versione estesa.

come ottenere il percorso completo del file il codice sopra fornisce solo il nome del file.

— Khurram Ijaz

3

@PHP Priest, non puoi. I browser non espongono questo tipo di informazioni.

— zneak

2

@PHP Priest, se potessi farlo, potresti trasmettere di nascosto i dati sul file system dell'utente tramite AJAX e l'utente probabilmente non lo saprebbe mai. Immagina quanto sarebbe peggio se potessi impostare programmaticamente il valore di un input di file. Si. Problemi di sicurezza.

— jinglesthula

1

Questo sembra un po 'esagerato? Il modo in cui ho elencato è molto più semplice e comprensibile.

— James111

20

Il modo più semplice è usare semplicemente la seguente riga di jquery, usando questo non ottieni le /fakepathsciocchezze, ottieni direttamente il file che è stato caricato:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

Alcuni altri comandi utili sono:

Per ottenere il nome del file:

$('input[type=file]')[0].files[0].name; // This gets the file name

Per ottenere il tipo di file:

Se dovessi caricare un PNG, tornerebbe image/png

$("#imgUpload")[0].files[0].type

Per ottenere la dimensione (in byte) del file:

$("#imgUpload")[0].files[0].size

Inoltre non devi usare questi comandi on('change', puoi ottenere i valori in qualsiasi momento, ad esempio potresti avere un caricamento di file e quando l'utente fa clic upload, usi semplicemente i comandi che ho elencato.

— James111
fonte

perché ho ricevuto l'errore Impossibile leggere la proprietà 'nome' di undefined?

— Gagantous

19

$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

Questo codice non verrà visualizzato C:\fakepath\prima del nome del file in Google Chrome in caso di utilizzo .val().

— Anatolii Pazhyn
fonte

4

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>

— Anil Gupta
fonte

Grazie! Ciò è stato utile per acquisire il nome effettivo del file caricato e non il percorso completo.

— Evan M

3

Avevo usato seguito che funzionava correttamente.

$('#fileAttached').attr('value', $('#attachment').val())

— ihmar
fonte

2

//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );

— redsquare
fonte

1

Aggiungi un pulsante di ripristino nascosto:

<input id="Reset1" type="reset" value="reset" class="hidden" />

Fare clic sul pulsante di ripristino per cancellare l'input.

$("#Reset1").click();

— daniel ye
fonte

1

Puoi fare clic su un pulsante nascosto?

— DaveWalley

-1

<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#viewImage')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>

— Raghuraj Singh Gurjar
fonte

grazie amico stavo cercando questo, so che questo non è l'argomento, ma era la mia risposta, sai;)

— Tarek.Eladly