Gunakan jQuery untuk mendapatkan nama file yang dipilih input file tanpa path

Saya menggunakan ini:

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

untuk mendapatkan nama file yang dipilih, tetapi mengembalikan path lengkap, seperti pada "C: \ fakepath \ filename.doc". Bagian "fakepath" sebenarnya ada di sana - tidak yakin apakah itu seharusnya, tetapi ini adalah pertama kalinya saya bekerja dengan nama file unggahan file.

Bagaimana saya bisa mendapatkan nama file (filename.doc)?

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

atau Anda bisa melakukannya (karena selalu C:\fakepathditambahkan untuk alasan keamanan):

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

Anda hanya perlu melakukan kode di bawah ini. Yang pertama [0] adalah untuk mengakses elemen HTML dan yang kedua [0] adalah untuk mengakses file pertama dari unggahan file (saya menyertakan validasi kalau-kalau tidak ada file):

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

Chrome kembali C:\fakepath\...karena alasan keamanan - situs web seharusnya tidak dapat memperoleh informasi tentang komputer Anda seperti jalur ke file di komputer Anda.

Untuk mendapatkan hanya bagian nama file dari sebuah string, Anda dapat menggunakan split()...

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

jsFiddle .

... atau ekspresi reguler ...

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

jsFiddle .

... atau lastIndexOf()...

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

jsFiddle .

Dapatkan path work dengan semua OS

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

Contoh

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

Keduanya kembali

filename.doc
filename.doc

Inilah cara saya melakukannya, itu bekerja dengan cukup baik.

Dalam HTML Anda lakukan:

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

Kemudian di file js Anda buat fungsi sederhana:

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

Jika Anda melakukan banyak file, Anda juga harus bisa mendapatkan daftar dengan mengulangi ini:

e.target.files[0].name

mungkin beberapa tambahan untuk menghindari 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);

Bagaimana dengan sesuatu yang seperti ini?

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

Apakah itu harus jquery? Atau bisakah Anda menggunakan asli JavaScript yourpath.split("\\")untuk membagi string ke array?

Dapatkan file pertama dari kontrol dan kemudian dapatkan nama file, itu akan mengabaikan path file di Chrome, dan juga akan membuat koreksi path untuk browser IE. Saat menyimpan file, Anda harus menggunakan System.io.Path.GetFileNamemetode untuk mendapatkan nama file hanya untuk 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);

Alternatif ini sepertinya yang paling tepat.

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

Di sini Anda dapat memanggil seperti ini. Biarkan ini adalah kontrol File Input saya

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

Sekarang di sini adalah Jquery saya yang dipanggil setelah Anda memilih file

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

</script>

Kami juga dapat menghapusnya menggunakan match

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