C: \ fakepath nasıl çözülür?

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

Bu benim yükleme düğmem.

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

Bu dosyanın tam yolunu göstermek zorunda olduğum metin alanıdır.

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

Bu, sorunumu çözen JavaScript. Ama uyarı değerinde bana

C:\fakepath\test.csv 

ve Mozilla bana şunu veriyor:

test.csv

Ama yerel tam nitelikli dosya yolunu istiyorum . Bu sorunu nasıl çözebilirim?

Bu tarayıcı güvenlik sorunundan kaynaklanıyorsa, bunu yapmanın alternatif yolu ne olmalıdır?

Bazı tarayıcılarda, JavaScript'in dosyanızın yerel tam yolunu bilmesini engelleyen bir güvenlik özelliği bulunur. Bu mantıklıdır - istemci olarak sunucunun yerel makinenizin dosya sistemini bilmesini istemezsiniz. Tüm tarayıcılar bunu yapsaydı iyi olurdu.

kullanım

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

onun yerine

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

onchangeGirdi dosya türü için girdi olayında FileReader nesnesini kullanıyorum ! Bu örnek, readAsDataURL işlevini kullanır ve bu nedenle bir etiketinizin olması gerekir. FileReader nesnesi ayrıca ikili verileri almak için readAsBinaryString'e sahiptir; bunlar daha sonra sunucunuzda aynı dosyayı oluşturmak için kullanılabilir

Misal:

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

Internet Explorer, Araçlar, Internet Seçeneği, Güvenlik, Özel'e giderseniz, "Dosyaları bir sunucuya yüklerken yerel dizin yolunu dahil et" i bulun (oldukça düşük bir yöntemdir) ve "Etkinleştir" i tıklayın. Bu çalışacak

Tarayıcıların bizi müdahaleci komut dosyalarından ve benzerlerinden kurtarmaya özen gösterdiği için mutluyum. Ben bir saldırı saldırı gibi basit bir stil düzeltme yapan tarayıcıya bir şey koyarak IE memnun değilim!

Dosya girişini temsil etmek için <span> kullandım, böylece <input> yerine <div> 'a uygun stil uygulayabilirim (IE'den bir kez daha). Şimdi bu IE nedeniyle Kullanıcı sadece nöbet ve en azından endişeli onları koymak için garanti edilen bir değer ile bir yol göstermek istiyorum (tamamen korkutmak değil mi?!) ... DAHA IE-CRAP!

Her neyse, açıklamayı buraya gönderenler sayesinde: IE Tarayıcı Güvenliği: Girişe [type = "file"] dosya yoluna "fakepath" ekleyerek , küçük bir fixer-üst koydum ...

Aşağıdaki kod iki şey yapar - yükleme alanının onBlur'una kadar onChange olayının başlatılmadığı bir lte IE8 hatasını düzeltir ve kullanıcıyı korkutmayacak temizlenmiş bir dosyayoluyla bir öğeyi günceller.

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

Aynı sorunla karşılaştım. IE8'de, dosya giriş denetiminden sonra gizli bir girdi oluşturularak geçici olarak çözülebilir. Bunu önceki kardeşinin değeri ile doldurun. IE9'da bu da düzeltildi.

Tam yolu tanımak istememin sebebi, yüklemeden önce bir javascript resim önizlemesi oluşturmaktı. Şimdi seçilen görüntünün önizlemesini oluşturmak için dosyayı yüklemeliyim.

Yükseltilmiş dosyanın tam yolunu gerçekten göndermeniz gerekiyorsa, tarayıcı göndermezse bu bilgiyi almanın herhangi bir yolu olmadığından muhtemelen imzalı bir java uygulaması gibi bir şey kullanmanız gerekir.

localhost içindeki tam yolu js ile bulamazsınız, ancak sadece dosya adını göstermek için fakepath'ı gizleyebilirsiniz. Dosya girdisinin seçili dosya adını yol olmadan almak için jQuery kullanın

Dosya okuyucuları kullanın:

$(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 orada, benim durumumda asp.net geliştirme ortamı kullanıyorum, bu yüzden asynchronus ajax isteğinde bu verileri yüklemek istedim, [webMethod] statik öğe olmadığından dosya yükleyiciyi yakalayamıyorum, bu yüzden yolu sabitleyerek böyle bir çözüm için bir ciro yapın, daha sonra istenen görüntüyü DB'ye kaydetmek için baytlara dönüştürün.

İşte benim javascript işlevi, size yardımcı olacağını umuyoruz:

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

burada sadece test için:

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

Sardesh Sharma'nın cevap kullanımını tamamlamak:

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

Tam yol için.