Bagaimana cara mengatasi C: \ fakepath?


256
<input type="file" id="file-id" name="file_name" onchange="theimage();">

Ini adalah tombol unggah saya.

<input type="text" name="file_path" id="file-path">

Ini adalah bidang teks tempat saya harus menunjukkan path lengkap file.

function theimage(){
 var filename = document.getElementById('file-id').value;
 document.getElementById('file-path').value = filename;
 alert(filename);
}

Ini adalah JavaScript yang menyelesaikan masalah saya. Namun dalam nilai waspada memberi saya

C:\fakepath\test.csv 

dan Mozilla memberi saya:

test.csv

Tapi saya ingin path file yang sepenuhnya memenuhi syarat lokal . Bagaimana cara mengatasi masalah ini?

Jika ini karena masalah keamanan browser, lalu apa cara alternatif untuk melakukan ini?


41
Ini adalah implementasi keamanan browser - browser melindungi Anda dari mengakses struktur disk Anda. Mungkin membantu jika Anda bisa menjelaskan mengapa Anda menginginkan path lengkap.
Stuart

1
Apa yang Anda maksud dengan url penuh ? Alamat file yang diunggah?
gor

4
Sebagai catatan, IE hanya memberikan sedikit "fakepath" karena mereka tidak ingin server yang "mengharapkan" jalan untuk dipecah. Kalau tidak seperti browser lain untuk alasan keamanan Anda hanya akan mendapatkan nama file (tidak ada jalan). Lebih penting lagi, kecuali jika Anda memiliki niat jahat, saya tidak bisa melihat mengapa mengetahui jalan menyediakan sesuatu yang bermanfaat.
scunliffe

2
browser security issue~ jika ini diterapkan di browser (memang demikian) maka sangat tidak mungkin Anda bisa mengelak
Ross

13
Astaga, saya menyimpan semua file saya C:\fakepath, jadi sekarang semua orang tahu struktur direktori saya.
mbomb007

Jawaban:


173

Beberapa browser memiliki fitur keamanan yang mencegah JavaScript dari mengetahui jalur lengkap lokal file Anda. Masuk akal - sebagai klien, Anda tidak ingin server mengetahui sistem file mesin lokal Anda. Alangkah baiknya jika semua browser melakukan ini.


9
Jika browser tidak mengirim jalur file lokal, tidak ada cara untuk mengetahuinya.
Petteri Hietavirta

47
Cukup kirim formulir: peramban akan mengurus pengunggahan. Situs web Anda tidak perlu mengetahui jalur lengkap kembali pada klien.
Rup

2
@ruffp Anda hanya dapat mengunggah dengan sebuah pos sehingga Anda perlu memasukkan unggahan dalam bentuk dan mengirimkannya. Itu masih akan menggunakan kontrol unggah file standar untuk memilih file dan Anda masih tidak memerlukan nama file klien lengkap.
Rup

6
Saya ragu ada sesuatu yang berbahaya yang bisa dilakukan situs web normal ke mesin lokal Anda tanpa beberapa jenis plugin tepercaya seperti Flash atau Java. Ini lebih merupakan masalah privasi. Misalnya, jika Anda sedang meng-upload dari desktop Anda, Anda akan membiarkan server tahu nama pengguna pada mesin Anda lokal atau domain ( c:\users\myname\desktopatau /Users/myname/Desktop/atau apa pun). Itu bukan sesuatu yang diketahui oleh server web.
Joe Enos

8
Privasi hampir selalu berkaitan dengan keamanan dan kerentanan karena informasi dapat digunakan terhadap seseorang. Serangan sering mengeksploitasi berbagai masalah untuk mencapai tujuan mereka. Siapa pun yang tidak mengenali bahayanya tidak boleh diizinkan berada di dekat kode selain Hello World tanpa tambahan bengkel bagaimana-menjadi-paranoid.
Archimedix

70

Menggunakan

document.getElementById("file-id").files[0].name; 

dari pada

document.getElementById('file-id').value

16
Di Chrome 44.0.2403.125, ini hanya memberi Anda nama file.
gap

4
Kemudian gunakan document.getElementById ("file-id"). File [0] .path. Bekerja dengan baik untuk saya.
Loaderon

Terima kasih @Loaderon Anda harus memposting ini sebagai jawaban!
7geeky

45

Saya menggunakan objek FileReader pada onchangeacara input untuk jenis file input Anda! Contoh ini menggunakan fungsi readAsDataURL dan untuk alasan itu Anda harus memiliki tag. Objek FileReader juga telah membacaAsBinaryString untuk mendapatkan data biner, yang nantinya dapat digunakan untuk membuat file yang sama di server Anda

Contoh:

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}

tahu mengapa ini tidak bekerja di localhost? sumber akan ditetapkan sebagai src = "C: \ fakepath \ filename.jpg" tetapi console.logging elemen gambar mengatakan src adalah dataURL
galki

jawaban: backbone rerendering: /
galki

1
Anda tidak tahu seberapa frustrasi entri ini disimpan. Ini adalah berlian dalam kasar ... hanya 12 suara tetapi layak lebih banyak. Senang saya melihat lebih jauh ke bawah karena entri lain dengan upvote jauh lebih tinggi tidak berfungsi dan juga FormData () tidak akan melakukan trik untuk tujuan kita. Sudah selesai dilakukan dengan baik!
user1585204

9
Pertanyaannya adalah menanyakan jalur file, bukan konten file.
Quentin

@ Quentin: ya Anda benar, tetapi jelas maksud OP adalah untuk dapat entah bagaimana mungkin mengunggah file ke server. Dengan demikian solusi ini tentu berhasil tentu sangat membantu bagi semua orang yang mencari cara mengunggah file ke server menggunakan JS.
user18490

36

Jika Anda pergi ke Internet Explorer, Tools, Opsi Internet, Keamanan, Custom, cari "Sertakan jalur direktori lokal Saat mengunggah file ke server" (ini agak jauh) dan klik "Aktifkan". Ini akan bekerja


2
Apakah ada yang mirip dengan Chrome?
Zaven Zareyan

11

Saya senang bahwa browser peduli untuk menyelamatkan kami dari skrip yang mengganggu dan sejenisnya. Saya tidak senang dengan IE memasukkan sesuatu ke dalam peramban yang membuat perbaikan gaya sederhana seperti serangan balik!

Saya telah menggunakan <span> untuk mewakili input file sehingga saya bisa menerapkan style yang sesuai pada <div> daripada <input> (sekali lagi, karena IE). Sekarang karena ini IE ingin menunjukkan kepada Pengguna jalan dengan nilai yang hanya dijamin untuk membuat mereka waspada dan paling tidak khawatir (jika tidak benar-benar membuat mereka takut?!) ... LEBIH IE-CRAP!

Bagaimanapun, terima kasih kepada mereka yang memposting penjelasan di sini: Keamanan Browser IE: Menambahkan "fakepath" ke path file dalam input [type = "file"] , saya telah mengumpulkan fixer kecil-atas ...

Kode di bawah ini melakukan dua hal - itu memperbaiki bug IE8 lte di mana peristiwa onChange tidak menyala sampai bidang unggah onBlur dan memperbarui elemen dengan filepath dibersihkan yang tidak akan menakuti Pengguna.

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $('input[type="file"]');
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement('span')).addClass('file-underlay')
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword 'this' changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings('.file-underlay');
                    // check for IE's lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\\fakepath\\/i, '');
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);

Harap dicatat bahwa ini tidak berfungsi pada IE, karenanya; Saya mengganti yang berikut: filePath.substring (filePath.lastIndexOf ('\\') + 1, filePath.length)
Bassel Kh

6

Saya menemukan masalah yang sama. Di IE8 itu bisa diatasi dengan membuat input tersembunyi setelah kontrol input file. Isi ini dengan nilai saudara sebelumnya. Di IE9 ini telah diperbaiki juga.

Alasan saya ingin mengetahui jalur lengkapnya adalah membuat pratinjau gambar javascript sebelum diunggah. Sekarang saya harus mengunggah file untuk membuat pratinjau gambar yang dipilih.


1
Jika seseorang ingin melihat gambar sebelum mengunggah, mereka dapat melihatnya di komputer mereka.
mbomb007

4

Jika Anda benar-benar perlu mengirim path lengkap dari file uploded, maka Anda mungkin harus menggunakan sesuatu seperti applet java yang ditandatangani karena tidak ada cara untuk mendapatkan informasi ini jika browser tidak mengirimkannya.


bagaimana mengatur jalur asli <input type = "file" accept = ". jpeg, .jpg, .png">. saya mendapatkan jalur palsu, bagaimana me-reslove-nya
Govind Sharma


1

Gunakan pembaca file:

$(document).ready(function() {
        $("#input-file").change(function() {
            var length = this.files.length;
            if (!length) {
                return false;
            }
            useImage(this);
        });
    });

    // Creating the function
    function useImage(img) {
        var file = img.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg", "image/png", "image/jpg"];
        if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
            alert("Invalid File Extension");
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(img.files[0]);
        }

        function imageIsLoaded(e) {
            $('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });

        }
    }

-1

Hy di sana, dalam kasus saya saya menggunakan lingkungan pengembangan asp.net, jadi saya ingin mengunggah data tersebut dalam asynchronus ajax request, di [webMethod] Anda tidak dapat menangkap pengunggah file karena itu bukan elemen statis, jadi saya harus membuat pergantian untuk solusi tersebut dengan memperbaiki jalur, daripada mengubah gambar yang diinginkan menjadi byte untuk menyimpannya dalam DB.

Ini adalah fungsi javascript saya, semoga membantu Anda:

function FixPath(Path)
         {
             var HiddenPath = Path.toString();
             alert(HiddenPath.indexOf("FakePath"));

             if (HiddenPath.indexOf("FakePath") > 1)
             {
                 var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
                 MainStringLength = HiddenPath.length - UnwantedLength;
                 var thisArray =[];
                 var i = 0;
                 var FinalString= "";
                 while (i < MainStringLength)
                 {
                     thisArray[i] = HiddenPath[UnwantedLength + i + 1];
                     i++;
                 }
                 var j = 0;
                 while (j < MainStringLength-1)
                 {
                     if (thisArray[j] != ",")
                     {
                         FinalString += thisArray[j];
                     }
                     j++;
                 }
                 FinalString = "~" + FinalString;
                 alert(FinalString);
                 return FinalString;
             }
             else
             {
                 return HiddenPath;
             }
         }

di sini hanya untuk pengujian:

 $(document).ready(function () {
             FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
         });
// this will give you : ~/EnsaLmadiLiYghiz

-3

Melengkapi penggunaan jawaban Sardesh Sharma:

document.getElementById("file-id").files[0].path

Untuk jalur penuh.


Ini kembali undefinedkepada saya di FireFox 75.0. Apakah pathsebenarnya ada? Apakah Anda memiliki referensi dokumentasi tentang hal itu?
Jose Manuel Abarca Rodríguez

1
Hai! Saya memposting jawaban ini setelah mencoba menyelesaikan masalah sendiri dan berhasil menggunakan jalur. Saya tidak ingat dalam proyek apa saya mencoba ini, tetapi saya selalu menggunakan Google Chrome, mungkin solusi ini hanya cocok untuk browser itu. Dan itu bahkan mungkin menjadi usang karena pembaruan browser. Maaf tidak dapat membantu lebih lanjut: /
Loaderon
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.