Как решить C: \ FakePath? - PullRequest
       4

Как решить C: \ FakePath?

216 голосов
/ 31 января 2011
<input type="file" id="file-id" name="file_name" onchange="theimage();">

Это моя кнопка загрузки.

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

Это текстовое поле, в котором я должен показать полный путь к файлу.

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

Это JavaScript, который решает мою проблему. Но в сообщении значение дает мне

C:\fakepath\test.csv 

и Мозилла дает мне:

test.csv

Но мне нужен локальный полный путь к файлу . Как решить эту проблему?

Если это связано с проблемой безопасности браузера, каким должен быть альтернативный способ сделать это?

Ответы [ 11 ]

156 голосов
/ 31 января 2011

Некоторые браузеры имеют функцию безопасности, которая не позволяет JavaScript знать локальный полный путь вашего файла. Это имеет смысл - как клиент, вы не хотите, чтобы сервер знал файловую систему вашего локального компьютера. Было бы хорошо, если бы все браузеры делали это.

56 голосов
/ 01 июня 2015

Использование

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

вместо

document.getElementById('file-id').value
37 голосов
/ 26 октября 2011

Если вы заходите в Internet Explorer, Сервис, Интернет, Безопасность, Пользовательский, найдите «Включить путь к локальному каталогу при загрузке файлов на сервер» (это довольно далеко) и нажмите «Включить». Это будет работать

34 голосов
/ 02 октября 2013

Я использую объект FileReader для события ввода onchange для вашего типа входного файла!В этом примере используется функция readAsDataURL, и по этой причине у вас должен быть тег.Объект FileReader также имеет readAsBinaryString для получения двоичных данных, которые впоследствии можно использовать для создания того же файла на вашем сервере

Пример:

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;
}
11 голосов
/ 10 марта 2012

Я рад, что браузеры заботятся о том, чтобы спасти нас от навязчивых скриптов и тому подобного. Я не доволен тем, что IE помещает в браузер что-то, что делает простое исправление стиля похожим на хак-атаку!

Я использовал для представления файлового ввода, чтобы я мог применить соответствующий стиль к вместо (еще раз, из-за IE). Теперь из-за этого IE хочет показать пользователю путь со значением, которое гарантированно защитит его и в крайнем случае (если не полностью отпугнет?!) ... БОЛЬШЕ IE-CRAP!

Во всяком случае, спасибо тем, кто разместил объяснение здесь: IE Browser Security: добавив "fakepath" к пути к файлу при вводе [type = "file"] * , я собрал небольшой исправитель -Верхний ...

Приведенный ниже код выполняет две вещи: он исправляет ошибку IE8, в которой событие onChange не срабатывает до тех пор, пока не будет загружено поле onBlur, и обновляет элемент с очищенным путем к файлу, который не пугает пользователя.

// 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);
6 голосов
/ 24 августа 2011

Я столкнулся с той же проблемой.В IE8 это можно обойти, создав скрытый ввод после контроля ввода файла.Заполните это значением предыдущего брата.В IE9 это также исправлено.

Моя причина в желании узнать полный путь состояла в том, чтобы создать предварительный просмотр изображения JavaScript перед загрузкой.Теперь мне нужно загрузить файл, чтобы создать предварительный просмотр выбранного изображения.

4 голосов
/ 31 января 2011

Если вам действительно нужно отправить полный путь к загруженному файлу, вам, вероятно, придется использовать что-то вроде подписанного Java-апплета, так как нет никакой возможности получить эту информацию, если браузер ее не отправляет..

1 голос
/ 30 декабря 2013

кажется, что вы не можете найти полный путь в вашем локальном хосте с помощью js, но вы можете скрыть поддельный путь, чтобы просто показать имя файла. Используйте jQuery, чтобы получить выбранное имя файла для ввода без пути

0 голосов
/ 08 ноября 2018

Дополняет ответ Сардеша Шарма:

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

Для полного пути.

0 голосов
/ 05 сентября 2018

Используйте программы чтения файлов:

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

        }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...