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


153

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)?


11
Peramban mengubah jalur sebenarnya ke C:\fakepath\ situs jahat sehingga tidak dapat menggunakan javascript untuk mengumpulkan informasi tentang struktur direktori komputer Anda.
membanting tulang

Jawaban:


294
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, '')

1
Apa yang saya butuhkan, manji! Saya juga perlu memeriksa ekstensi, jadi saya menggunakan contoh Anda dengan cara ini: var extension = filename.split ('.'). Pop (); untuk mendapatkannya juga! Terima kasih!
Marky

Apakah Fakepathdengan huruf kapital F?
alex

16
@ MikeDeSimone Saya sudah menguji split ('\\'). Pop (); pada Win 7, Ubuntu 11.04 dan Mac OS X dan berfungsi dengan baik pada semuanya.
Alex

3
@ Alex: Wow, itu cukup gila. Jadi itu benar-benar hanya solusi untuk kode JS buruk seseorang dari jalan kembali yang tidak akan pernah diperbaiki. Saya menjalankan Safari di Mac, dan saya melihat "C: \ fakepath \" di sana. (Mainkan dengan itu di jsfiddle .)
Mike DeSimone

1
@ VítorBaptista File Windows tidak dapat memiliki garis miring terbalik pada namanya. Ini dimungkinkan pada MacOS meskipun "Anda harus menghindari penggunaan titik dua dan garis miring pada nama file dan folder karena beberapa sistem operasi dan format drive menggunakan karakter ini sebagai pemisah direktori" seperti yang dijelaskan dalam situs web Apple
joao.arruda

68

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 : "";

1
Satu hal yang perlu dipertimbangkan ketika menggunakan opsi ini: ketika Anda mengklik lagi pada tombol 'Pilih file' untuk membuka jendela file yang terbuka, lalu klik pada tombol melarikan diri, kesalahan konsol akan dilemparkan.
luke_mclachlan

Yap, Anda benar, tetapi maksudnya hanya meletakkan kode untuk mendapatkan nama karena karena kode mendapatkan nama dari posisi kode keras akan perlu memeriksa jika ada beberapa file (untuk kasus ini kita berbicara dalam hanya satu file, tetapi bisa memiliki lebih banyak dan kode perlu diulangi oleh semua elemen). Tapi tentu saja, saya akan memperbarui kode dan memasukkan validasi ini.
Diego Cotini

23

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 .


21

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

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

13

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

Karena ID bidang tidak melakukan apa pun dalam konteks ini, Fungsi di JS harus memiliki 1 parameter lebih sedikit, hanya e daripada fileSelect (id, e) hanya fileSelect (e). Terima kasih atas solusinya :).
Jasper Lankhorst

8

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);

5

Bagaimana dengan sesuatu yang seperti ini?

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

4

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


3

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; 
} 

2
<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>

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

1

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.');
});

0

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>

0

Kami juga dapat menghapusnya menggunakan match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.