Użyj jQuery, aby uzyskać wybraną nazwę pliku wejściowego pliku bez ścieżki

Użyłem tego:

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

aby uzyskać wybraną nazwę pliku, ale zwróciła pełną ścieżkę, na przykład „C: \ fakepath \ filename.doc”. Część „fakepath” faktycznie tam była - nie jestem pewien, czy powinna, ale po raz pierwszy pracuję z nazwami przesyłanych plików.

Jak mogę po prostu uzyskać nazwę pliku (nazwa_pliku.doc)?

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

lub możesz po prostu zrobić (ponieważ jest to zawsze C:\fakepathdodawane ze względów bezpieczeństwa):

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

Wystarczy wykonać poniższy kod. Pierwsze [0] to dostęp do elementu HTML, a drugie [0] to dostęp do pierwszego pliku załadowanego pliku (włączyłem walidację w przypadku, gdy nie ma pliku):

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

Chrome powraca C:\fakepath\...ze względów bezpieczeństwa - witryna nie powinna mieć możliwości uzyskania informacji o Twoim komputerze, takich jak ścieżka do pliku na Twoim komputerze.

Aby uzyskać tylko część ciągu zawierającą nazwę pliku, możesz użyć split()...

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

jsFiddle .

... lub wyrażenie regularne ...

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

jsFiddle .

... lub lastIndexOf()...

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

jsFiddle .

Uzyskaj pracę ze wszystkimi systemami operacyjnymi

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

Przykład

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

Obie wracają

filename.doc
filename.doc

Oto jak to robię, działa całkiem nieźle.

W swoim HTML wykonaj:

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

Następnie w pliku js utwórz prostą funkcję:

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

Jeśli robisz wiele plików, powinieneś być w stanie uzyskać listę, przechodząc przez to:

e.target.files[0].name

może jakiś dodatek, aby uniknąć 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);

A może coś takiego?

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

Czy to musi być jQuery? A może możesz po prostu użyć natywnego języka JavaScript, yourpath.split("\\")aby podzielić ciąg na tablicę?

Pobierz pierwszy plik z kontrolki, a następnie uzyskaj nazwę pliku, zignoruje ścieżkę do pliku w przeglądarce Chrome, a także dokona korekty ścieżki dla przeglądarek IE. Podczas zapisywania pliku musisz użyć System.io.Path.GetFileNamemetody, aby uzyskać nazwę pliku tylko dla przeglądarek 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);

Ta alternatywa wydaje się najbardziej odpowiednia.

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

Tutaj możesz wywołać w ten sposób Niech to jest moja kontrolka pliku wejściowego

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

Oto moje Jquery, które są wywoływane po wybraniu pliku

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

</script>

Możemy go również usunąć za pomocą match

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