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


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

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

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


41
Это реализация безопасности браузера - браузер защищает вас от доступа к структуре вашего диска. Это может помочь, если вы можете объяснить, почему вы хотите полный путь.
Стюарт

1
Что вы подразумеваете под полным URL ? Адрес загруженного файла?
Гор

4
Для справки, IE дает только бит «fakepath», потому что они не хотели, чтобы серверы «ожидали» пути к разрыву. В противном случае, как и в других браузерах, из соображений безопасности вы получите только имя файла (без пути). Что еще более важно, если у вас нет злых намерений, я не могу понять, почему знание пути дает что-то полезное.
scunliffe

2
browser security issue~ если он реализован в браузере (правильно), то вряд ли вы сможете его обойти
Росс

13
Черт возьми, я храню все свои файлы C:\fakepath, так что теперь все знают мою структуру каталогов.
mbomb007

Ответы:


173

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


9
Если браузер не отправляет локальный путь к файлу, найти его невозможно.
Петтери Хиетавирта

47
Просто отправьте форму: браузер позаботится о загрузке. Вашему веб-сайту не нужно знать полный путь к клиенту.
Rup

2
@ruffp Вы можете загружать только с сообщением, поэтому вам нужно поместить загрузку в форму и отправить ее. При этом для выбора файла по-прежнему будет использоваться стандартный элемент управления загрузкой файлов, и вам по-прежнему не потребуется полное имя файла клиента.
Rup

6
Я сомневаюсь, что обычный веб-сайт может сделать что-то вредоносное для вашей локальной машины без какого-либо надежного плагина, такого как Flash или Java. Это скорее вопрос конфиденциальности. Например, если вы находитесь загрузка с рабочего стола, вы бы позволить серверу знать имя пользователя на локальном компьютере или в домене ( c:\users\myname\desktopили /Users/myname/Desktop/или любой другой ). Это не то, что веб-сервер знает о бизнесе.
Джо Энос

8
Конфиденциальность почти всегда связана с безопасностью и уязвимостью, поскольку информация может быть использована против кого-либо. Атаки часто используют несколько проблем для достижения своих целей. Любой, кто не признает опасности, не должен быть допущен рядом с кодом, отличным от Hello World, без дополнительных практических занятий по параноидальному поведению.
Archimedix

70

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

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

вместо того

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

16
В Chrome 44.0.2403.125 это только предоставляет вам имя файла.
разрыв

4
Затем используйте document.getElementById ("file-id"). Files [0] .path. У меня отлично работает.
Loaderon

Спасибо @Loaderon, вы должны опубликовать это как ответ!
7geeky

45

Я использую объект 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;
}

Любая идея, почему даже это не работает на localhost? источник устанавливается как src = "C: \ fakepath \ filename.jpg", но console.logging элемента изображения говорит, что src является dataURL
galki

ответ: рендеринг магистрали: /
galki

1
Вы не представляете, сколько разочарований спасла эта запись. Это алмаз в необработанном виде ... всего 12 голосов, но заслуживает гораздо большего. Рад, что я посмотрел еще дальше, потому что другие записи с гораздо более высоким числом голосов не работали, а также FormData () не сработает для наших целей. Отлично сработано!
user1585204

9
Вопрос заключается в том, чтобы указать путь к файлу, а не содержимое файла.
Квентин

@Quentin: да, вы правы, но ясно, что цель ОП состоит в том, чтобы каким-то образом загрузить файл на сервер. Таким образом, это решение будет работать, безусловно, очень полезно для всех людей, которые ищут способ загрузки файлов на сервер с использованием JS.
user18490

36

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


2
Есть ли что-то похожее на Chrome?
Завен Зареян

11

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

Я использовал <span> для представления файлового ввода, чтобы я мог применить соответствующий стиль к <div> вместо <input> (еще раз, из-за 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);

Обратите внимание, что это не работает на IE, следовательно; Я заменил следующее: filePath.substring (filePath.lastIndexOf ('\\') + 1, filePath.length)
Бассель Х

6

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

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


1
Если кто-то хочет увидеть изображение перед загрузкой, он может просмотреть его на своем компьютере.
mbomb007

4

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


как получить полный путь к исходному пути <input type = "file" accept = ". jpeg, .jpg, .png">. я получаю фальшивый путь, как его восстановить
Говинд Шарма


1

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

$(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

Здесь, в моем случае, я использую среду разработки asp.net, поэтому я хотел загрузить эти данные в асинхронном ajax-запросе, в [webMethod] вы не можете перехватить загрузчик файлов, так как он не является статическим элементом, поэтому мне пришлось сделайте оборот для такого решения, исправив путь, затем преобразуйте искомое изображение в байты, чтобы сохранить его в БД.

Вот моя функция JavaScript, надеюсь, она вам поможет:

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

здесь только для тестирования:

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

-3

Дополняя использование ответа Сардеша Шармы:

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

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


Это возвращается undefinedко мне в FireFox 75.0. На pathсамом деле существует? Есть ли у вас какие-либо ссылки на документацию об этом?
Хосе Мануэль Абарка Родригес

1
Здравствуй! Я отправил этот ответ после попытки решить проблему самостоятельно и быть успешным, используя путь. Я не помню, в каком проекте я пытался это сделать, но я всегда использую Google Chrome, возможно, это решение подходит только для этого браузера. И это может даже устареть из-за обновлений браузера. Извините, что не
могу
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.