295

如何在使用选择文件时获取文件的完整路径<input type=‘file’&gt;

<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）似乎只给出了文件名。
有没有其他方法可以获取所选文件的完整路径？

$txtTree[0]="/";

foreach($treeArray as $branch){

    if(isset($txtTree[$branch['parent_id']])) {
        $txtTree[$branch['id']] = $txtTree[$branch['parent_id']] . $branch['name']. "/";
    }
} 

print_r($txtTree);


Array
(
    [0] => /
    [1] => /New Folder/
    [2] => /New Folder/New Folder2/
    [3] => /New Folder/New Folder2/New Folder3/
    [6] => /New Folder6/
    [7] => /New Folder6/New Folder7/
    [8] => /New Folder6/New Folder8/
)
4

13 回答 13

197

For security reasons browsers do not allow this, i.e. JavaScript in browser has no access to the File System, however using HTML5 File API, only Firefox provides a mozFullPath property, but if you try to get the value it returns an empty string:

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

https://jsfiddle.net/SCK5A/

So don't waste your time.

edit: If you need the file's path for reading a file you can use the FileReader API instead. Here is a related question on SO: Preview an image before it is uploaded.

于 2013-03-04T12:09:13.360 回答
115

尝试这个：

它会给你一个临时路径而不是准确的路径，如果你想在这个 jsfiddle 示例中显示选定的图像，你可以使用这个脚本（通过 selectng 图像以及其他文件尝试）： -

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

它不完全是您正在寻找的东西，但它可能会在某个地方为您提供帮助。

于 2014-07-18T06:07:47.523 回答
18

你不能。安全性会阻止您对客户端计算机的文件系统一无所知 - 它甚至可能没有！它可以是 MAC、PC、平板电脑或支持互联网的冰箱——你不知道、不知道也不会知道。让您拥有完整路径可以为您提供有关客户端的一些信息——尤其是在它是网络驱动器的情况下。

事实上，您可以在特定条件下获得它，但它需要 ActiveX 控件，并且在 99.99% 的情况下无法正常工作。

无论如何，您都不能使用它将文件恢复到原始位置（因为您完全无法控制下载的存储位置，或者即使它们被存储），所以实际上它对您来说并没有多大用处。

于 2013-11-22T05:47:41.700 回答
18

您不能这样做 - 出于安全考虑，浏览器不允许这样做。

当使用输入 type=file 对象选择文件时，value 属性的值取决于用于显示网页的安全区域的“将文件上传到服务器时包括本地目录路径”安全设置的值包含输入对象。

仅当启用此设置时，才会返回所选文件的完全限定文件名。禁用该设置时，Internet Explorer 8 将本地驱动器和目录路径替换为字符串 C:\fakepath\，以防止不适当的信息泄露。

和别的

);您在更改事件函数结束时错过了这一点。

也不要为更改事件创建函数，而是按如下方式使用它，

<script type="text/javascript">

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

</script>
于 2013-03-04T12:05:10.187 回答
12

你是这个意思吗？

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});
于 2014-11-23T19:10:16.800 回答
12

您可以使用以下代码获取上传文件的有效本地 URL：

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>
于 2016-03-30T14:26:41.593 回答
9

一个有趣的注意事项：虽然这在网络上不可用，但如果你在 Electron 中使用 JS，那么你可以这样做。

使用标准 HTML5 文件输入，您将收到所选文件的额外path属性，其中包含真实文件路径。

完整文档在这里：https ://github.com/electron/electron/blob/master/docs/api/file-object.md

于 2019-11-18T14:23:54.733 回答
2

您可以，如果您可以选择上传整个文件夹

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

更改事件将包含：

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

但它不包含整个绝对路径，只包含相对路径。Firefox 也支持。

于 2017-03-04T09:31:36.300 回答
1

you should never do so... and I think trying it in latest browsers is useless(from what I know)... all latest browsers on the other hand, will not allow this...

some other links that you can go through, to find a workaround like getting the value serverside, but not in clientside(javascript)

Full path from file input using jQuery
How to get the file path from HTML input form in Firefox 3

于 2013-03-04T12:09:07.120 回答
0

可以使用 FileReader API 来更改 img 元素的 src。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

于 2021-04-04T08:05:00.840 回答
-1

文件元素有并且数组调用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);
于 2017-12-13T07:56:23.680 回答
-3 
$('input[type=file]').change(function () {
    console.log(this.files[0].path);
});

这是正确的形式。

于 2021-08-01T13:57:07.823 回答
-3

您只能通过 IE11 和 MS Edge 获取要上传的所选文件的完整路径。

var fullPath = Request.Form.Files["myFile"].FileName;
于 2019-04-01T11:03:21.500 回答