Utilizzare jQuery per ottenere il nome file selezionato per l'input del file senza il percorso

Ho usato questo:

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

per ottenere il nome file selezionato, ma ha restituito il percorso completo, come in "C: \ fakepath \ nomefile.doc". La parte "fakepath" era effettivamente lì - non so se dovrebbe essere, ma questa è la prima volta che lavoro con il nome file dei caricamenti di file.

Come posso ottenere solo il nome del file (nomefile.doc)?

var filename = $('input[type=file]').val().split('\\').pop();

o potresti semplicemente farlo (perché è sempre C:\fakepathquello che viene aggiunto per motivi di sicurezza):

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')

Devi solo fare il codice qui sotto. Il primo [0] è accedere all'elemento HTML e il secondo [0] è accedere al primo file del caricamento del file (ho incluso una convalida nel caso in cui non ci sia alcun file):

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";

Chrome ritorna C:\fakepath\...per motivi di sicurezza: un sito Web non dovrebbe essere in grado di ottenere informazioni sul tuo computer come il percorso di un file sul tuo computer.

Per ottenere solo la parte del nome file di una stringa, puoi usare split()...

var file = path.split('\\').pop();

jsFiddle .

... o un'espressione regolare ...

var file = path.match(/\\([^\\]+)$/)[1];

jsFiddle .

... o lastIndexOf()...

var file = path.substr(path.lastIndexOf('\\') + 1);

jsFiddle .

Ottieni percorso di lavoro con tutti i sistemi operativi

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

Esempio

C:\fakepath\filename.doc 
/var/fakepath/filename.doc

Entrambi ritornano

filename.doc
filename.doc

Ecco come lo faccio, funziona abbastanza bene.

Nel tuo HTML fai:

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

Quindi nel tuo file js crea una semplice funzione:

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

Se stai eseguendo più file, dovresti anche essere in grado di ottenere l'elenco ripetendo ciclicamente questo:

e.target.files[0].name

forse qualche aggiunta per evitare fakepath:

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);

Che ne dici di questo?

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);

Deve essere jquery? O puoi semplicemente usare il nativo di JavaScript yourpath.split("\\")per dividere la stringa in un array?

Ottieni il primo file dal controllo e quindi ottieni il nome del file, ignorerà il percorso del file su Chrome e inoltre effettuerà la correzione del percorso per i browser IE. Al momento del salvataggio del file, è necessario utilizzare il System.io.Path.GetFileNamemetodo per ottenere il nome del file solo per i browser IE

var fileUpload    = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files         =  fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i < files.length; i++) { 
  mediafilename = files[i].name; 
} 

<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(\/|\\)/, '');
        // .. do your magic

        $('#filename').html(filename);
    });
</script>

var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);

Questa alternativa sembra la più appropriata.

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});

Qui puoi chiamare così Lascia che questo sia il mio controllo del file di input

  <input type="file" title="search image" id="file" name="file" onchange="show(this)"  />

Ora ecco il mio Jquery che viene chiamato una volta selezionato il file

<script type="text/javascript">
    function show(input) {
        var fileName = input.files[0].name;
        alert('The file "' + fileName + '" has been selected.');               
            }

</script>

Possiamo anche rimuoverlo usando match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);