Bagaimana cara mengatasi C: \ fakepath?

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

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.

Menggunakan

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

dari pada

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

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

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

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

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.

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.

tampaknya Anda tidak dapat menemukan path lengkap di localhost Anda oleh js, tetapi Anda dapat menyembunyikan fakepath untuk hanya menampilkan nama file. Gunakan jQuery untuk mendapatkan nama file input file yang dipilih tanpa path

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 + ")" });

        }
    }

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

Melengkapi penggunaan jawaban Sardesh Sharma:

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

Untuk jalur penuh.