Bagaimana cara mendapatkan path lengkap file yang dipilih pada perubahan <input type = 'file'> menggunakan javascript, jquery-ajax?


240

Cara mendapatkan path lengkap file saat memilih file menggunakan <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

tetapi filePath var berisi only namefile yang dipilih, bukan file full path.
Saya mencarinya di internet, tetapi tampaknya karena alasan keamanan browser (FF, chrome) hanya memberikan nama file.
Apakah ada cara lain untuk mendapatkan path lengkap dari file yang dipilih?




@nauphal terima kasih atas komentarnya tetapi adakah cara lain untuk mendapatkan path lengkap dari file yang dipilih?
Yogesh Pingle

1
Jika Anda berada dalam kasus di mana Anda ingin mendapatkan jalur file di server , (misalnya membangun antarmuka web ke utilitas commandline untuk dijalankan di server), Anda selalu dapat membangun jalur relatif, kirimkan melalui sebagai <option> s dan gunakan widget pohon atau ketik di depan untuk membiarkan pengguna memilihnya dan kemudian meminta server memproses file.
dardenfall

Jawaban:


164

Demi alasan keamanan, peramban tidak mengizinkan ini, yaitu JavaScript di peramban tidak memiliki akses ke Sistem File, namun menggunakan API File HTML5, hanya Firefox yang menyediakan mozFullPathproperti, tetapi jika Anda mencoba untuk mendapatkan nilai, peramban mengembalikan string kosong:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

Jadi jangan buang waktu Anda.

sunting: Jika Anda memerlukan jalur file untuk membaca file, Anda dapat menggunakan API FileReader sebagai gantinya. Berikut adalah pertanyaan terkait pada SO: Pratinjau gambar sebelum diunggah.


1
Lihat tautan ini karena ini membantu saya dengan masalah yang sama.
Amir Tugi

... Judul pertanyaan yang ditautkan adalah: Pratinjau gambar sebelum diunggah .
tidak ditentukan

Namun itu membuat saya URL untuk jalur untuk dikirim ke server
Amir Tugi

1
@AmirTugi Solusi itu membaca file. Ini tidak ada hubungannya dengan jalur file pada sistem file pengguna.
tidak ditentukan

Jadi bagaimana situs web ini bisa melakukannya?
SaidbakR

102

Coba ini:

Ini akan memberi Anda jalan sementara bukan jalur yang akurat, Anda dapat menggunakan skrip ini jika Anda ingin menampilkan gambar yang dipilih seperti dalam contoh jsfiddle ini (Cobalah dengan memilih gambar serta file lain): -

JSFIDDLE

Ini kodenya: -

HTML: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS: -

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

Ini tidak persis apa yang Anda cari, tetapi mungkin dapat membantu Anda di suatu tempat.


Apakah ada cara untuk melakukan ini dengan jenis file lain: pdf, docx, dll dan bukannya gambar jadi tunjukkan Ikon? Untuk kegunaan saya, saya ingin menyimpan file pada halaman sebelum saya mengirimnya memberi pengguna kesempatan untuk menambahkan komentar untuk memuatnya seperti pesan dengan teks.
user1040975

Apakah saya hanya perlu meletakkan konten "tmppath" di bilah alamat browser? Saya mencoba dan tidak berhasil.
MacGruber

@GangsarSwaPurba Sayangnya, itu tidak berfungsi di IE9 - lihat URL.createObjectURL () .
naXa

@naXa bagus, saya akan mengedit komentar saya di atas. uw, sayangnya saya tidak dapat mengedit komentar saya
Gangsar Swapurba

2
Pada baris ke-3 Anda harus menggunakan variabel tmppath alih-alih URL.createObjectURL (event.target.files [0]), ini lebih dioptimalkan.
Wessam El Mahdy

17

Anda tidak dapat melakukannya - browser tidak akan mengizinkan ini karena masalah keamanan.

Ketika file dipilih dengan menggunakan tipe input = objek file, nilai properti nilai tergantung pada nilai "Sertakan jalur direktori lokal saat mengunggah file ke server" pengaturan keamanan untuk zona keamanan yang digunakan untuk menampilkan halaman Web berisi objek input.

Nama file yang sepenuhnya memenuhi syarat dari file yang dipilih dikembalikan hanya ketika pengaturan ini diaktifkan. Ketika pengaturan dinonaktifkan, Internet Explorer 8 menggantikan jalur drive dan direktori lokal dengan string C: \ fakepath \ untuk mencegah pengungkapan informasi yang tidak pantas.

Dan lainnya

Anda melewatkan );ini di akhir fungsi perubahan acara.

Juga jangan membuat fungsi untuk acara ganti saja gunakan saja seperti di bawah ini,

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

19
Mencoba kode Anda tetapi itu memberi saya jalan yang salah. file saya ada di Ddirektori tetapi nilainya datangC:\fakepath\test.xls
Rahul Munjal

3
C: \ fakepath \ fileName.xls ... ada yang tahu bagaimana menyelesaikan ini?
André Dos Santos

14

Kamu tidak bisa Keamanan menghentikan Anda karena mengetahui sesuatu tentang sistem pengarsipan komputer klien - bahkan mungkin tidak memilikinya! Itu bisa berupa MAC, PC, Tablet, atau kulkas berkemampuan internet - Anda tidak tahu, tidak bisa tahu dan tidak akan tahu. Dan membiarkan Anda memiliki jalur lengkap dapat memberi Anda beberapa informasi tentang klien - terutama jika itu adalah drive jaringan misalnya.

Sebenarnya Anda bisa mendapatkannya dalam kondisi tertentu, tetapi membutuhkan kontrol ActiveX, dan tidak akan berfungsi dalam 99,99% keadaan.

Anda tidak dapat menggunakannya untuk mengembalikan file ke lokasi semula (karena Anda sama sekali tidak memiliki kendali atas tempat unduhan disimpan, atau bahkan jika itu disimpan) sehingga dalam praktiknya toh tidak banyak gunanya bagi Anda.


11

Apakah maksud Anda ini?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});

4
ini tidak memberikan jalur ke file. Mengapa dijungkirbalikkan berkali-kali?
FlowUI. SimpleUITesting.com

7

Anda dapat menggunakan kode berikut untuk mendapatkan URL lokal yang berfungsi untuk file yang diunggah:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>


1

Anda dapat, jika mengunggah seluruh folder adalah opsi untuk Anda

<input type="file" webkitdirectory directory multiple/>

acara perubahan akan berisi:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"


-1

elemen file memiliki dan memanggil array filesyang berisi semua hal yang diperlukan yang Anda butuhkan

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

2
Itu tidak memberikan path lengkap dari file yang diunggah.
Sergiu Mare

-3

Anda bisa mendapatkan path lengkap dari file yang dipilih untuk diunggah hanya oleh IE11 dan MS Edge.

var fullPath = Request.Form.Files["myFile"].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.