Как получить полный путь выбранного файла при изменении использования 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>

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

9 ответов


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

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

http://jsfiddle.net/SCK5A/

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

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


Попробуйте Это:

это даст вам временный путь не точный путь, вы можете использовать этот скрипт, если хотите показать выбранные изображения, как в этом примере 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>");
});

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


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

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

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

и другие

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

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

<script type="text/javascript">

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

</script>

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

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

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


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

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

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

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

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

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

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


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

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

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

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

элемент file имеет и массив вызова 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);