Как получить полный путь к выбранному файлу при изменении <input type = 'file> с помощью javascript, jquery-ajax?

Как получить полный путь к файлу при выборе файла с помощью <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

но filePath var содержит only name выбранного файла, а не full path.
Я искал его в сети, но кажется, что по соображениям безопасности браузеры (FF, chrome) просто дают имя файла.
Есть ли другой способ получить полный путь к выбранному файлу?

Ответ 1

В целях безопасности браузеры не допускают этого, то есть JavaScript в браузере не имеет доступа к файловой системе, однако, используя HTML5 File API, только Firefox предоставляет свойство mozFullPath, но если вы попытаетесь получить значение, оно вернет пустая строка:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

Так что не тратьте впустую свое время.

edit: Если вам нужен путь к файлу для чтения файла, вы можете использовать API FileReader. Вот связанный с этим вопрос о SO: Предварительный просмотр изображения перед его загрузкой.

Ответ 2

Попробуйте следующее:

Это даст вам временный путь, а не точный путь, вы можете использовать этот script, если вы хотите отобразить выбранные изображения, как в этом примере jsfiddle (попробуйте его, выбрав изображения, а также другие файлы): -

JSFIDDLE

Вот код: -

HTML: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

JS: -

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

Не то, что вы искали, но может быть, это может помочь вам где-то.

Ответ 3

Вы не можете этого сделать - браузер не допустит этого из-за проблем с безопасностью.

Когда файл выбирается с использованием типа input type = file, значение свойства value зависит от значения "Включить локальный путь к каталогу при загрузке файлов на сервер" настройка безопасности для зона безопасности, используемая для отображения веб-страницы, содержащей ввод объект.

Возвращается только полное имя файла выбранного файла когда этот параметр включен. Когда настройка отключена, Интернет Explorer 8 заменяет путь локального диска и каталога на строку C:\fakepath \, чтобы предотвратить неприемлемое раскрытие информации.

И другие

Вы пропустили ); это в конце функции события изменения.

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

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

Ответ 4

Вы не можете. Безопасность останавливает вас за то, что вы знаете что-либо о системе подачи клиентского компьютера - у нее может и не получиться! Это может быть MAC, ПК, планшет или интернет-холодильник - вы не знаете, не можете знать и не знать. И пусть вам полный путь может дать вам некоторую информацию о клиенте, особенно если это сетевой диск, например.

Фактически вы можете получить его в определенных условиях, но для этого требуется элемент управления ActiveX и не будет работать в 99,99% от обстоятельств.

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

Ответ 5

Вы имели в виду это?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});

Ответ 6

Вы можете использовать следующий код, чтобы получить рабочий локальный URL для загруженного файла:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>

Ответ 7

Вы никогда не должны делать это... и я думаю, что пробовать это в последних браузерах бесполезно (насколько я знаю)... все последние браузеры, с другой стороны, не допустят этого...

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

Полный путь от ввода файла с использованием jQuery
Как получить путь к файлу из формы ввода HTML в Firefox 3

Ответ 8

Вы можете, если вы загружаете целую папку для вас

<input type="file" webkitdirectory directory multiple/>

событие изменения будет содержать:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

Ответ 9

Элемент файла имеет и массив call files содержит все необходимые вам вещи

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

Ответ 10

Вы можете получить полный путь к выбранному файлу для загрузки только IE11 и MS Edge.

var fullPath = Request.Form.Files["myFile"].FileName;