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 di mana saya harus menunjukkan jalur 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. Tetapi dalam nilai peringatan memberi saya

C:\fakepath\test.csv 

dan Mozilla memberi saya:

test.csv

Tetapi saya ingin sepenuhnya memenuhi syarat jalur file lokal. Bagaimana cara mengatasi masalah ini?

Jika hal ini disebabkan oleh masalah keamanan browser, lalu bagaimana cara alternatif untuk melakukan hal ini?

Mengomentari pertanyaan (11)

Beberapa peramban memiliki fitur keamanan yang mencegah JavaScript mengetahui jalur lengkap lokal file Anda. Ini masuk akal - sebagai klien, Anda tidak ingin server mengetahui sistem berkas mesin lokal Anda. Akan lebih baik jika semua peramban melakukan hal ini.

Komentar (23)

Gunakan

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

bukan

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

Jika anda pergi ke Internet Explorer, alat-Alat, Internet, Keamanan, Adat, menemukan "Mencakup direktori lokal jalan Ketika meng-upload file ke server" (hal ini cukup cara bawah) dan klik pada "Mengaktifkan" . Ini akan bekerja

Komentar (2)

Saya menggunakan objek FileReader pada input onchange acara untuk input jenis file! Contoh ini menggunakan readAsDataURL fungsi dan untuk alasan itu, anda harus memiliki tag. Yang FileReader objek juga memiliki readAsBinaryString untuk mendapatkan data biner, yang nantinya dapat digunakan untuk membuat file yang sama pada 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;
}
Komentar (7)

Saya senang bahwa browser yang peduli untuk menyelamatkan kita dari mengganggu script dan sejenisnya. Saya tidak senang dengan IE menempatkan sesuatu ke browser yang membuat gaya yang sederhana-memperbaiki tampilan seperti hack-attack!

I've digunakan < span > untuk mewakili file-masukan sehingga saya bisa menerapkan styling yang tepat untuk < div > bukan < input > (sekali lagi, karena IE). Sekarang karena ini YAITU ingin's untuk menunjukkan Pengguna jalan dengan nilai yang's hanya dijamin untuk menempatkan mereka di jaga dan di paling memprihatinkan (jika tidak benar-benar menakut-nakuti mereka?!)... LEBIH IE-OMONG KOSONG!

Bagaimanapun, terima kasih untuk mereka yang diposting penjelasan berikut ini: IE Browser Keamanan: Menambahkan "fakepath" untuk path file di input[type="file"], I've menempatkan bersama-sama di bawah umur fixer-atas...

Kode di bawah ini melakukan dua hal - hal perbaikan lte IE8 bug di mana onChange doesn't api sampai tanggal field's onBlur dan update sebuah elemen dengan dibersihkan filepath yang tidak't menakut-nakuti 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);
Komentar (1)

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

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

Komentar (1)

Jika Anda benar-benar perlu mengirim jalur lengkap 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.

Komentar (2)

tampaknya anda dapat't menemukan path lengkap di localhost anda dengan js, tetapi anda dapat menyembunyikan fakepath untuk hanya menunjukkan nama file. https://stackoverflow.com/questions/6365858/use-jquery-to-get-the-file-inputs-selected-filename-without-the-path/6365883#6365883

Komentar (0)

Hy ada , dalam kasus saya saya menggunakan asp.net lingkungan pengembangan, jadi saya ingin meng-upload data-data tersebut di asynchronus permintaan ajax , di [webMethod] anda tidak dapat menangkap file uploader sejak itu tidak statis elemen , jadi saya harus membuat omset untuk solusi tersebut dengan memperbaiki jalan , dari ingin mengkonversi gambar ke byte untuk menyimpan itu di DB .

Berikut adalah fungsi javascript , 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
Komentar (0)

Menggunakan file pembaca:

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

        }
    }
Komentar (0)

Melengkapi Sardesh Sharma's jawaban penggunaan:

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

Untuk path lengkap.

Komentar (0)