如何使用javascript,jquery-ajax在《input type='file'》更改时获取所选文件的完整路径?

IT技术 javascript jquery file-upload filepath
2021-01-29 20:23:05

如何在使用选择文件时获取文件的完整路径 <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)似乎只给出了文件名。
有没有其他方法可以获得所选文件的完整路径?

6个回答

出于安全原因,浏览器不允许这样做,即浏览器中的 JavaScript 无法访问文件系统,但是使用 HTML5 文件 API,只有 Firefox 提供了一个mozFullPath属性,但是如果您尝试获取该值,它将返回一个空字符串:

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

https://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

编辑:如果您需要文件的路径来读取文件,您可以改用FileReader API。这是关于 SO 的相关问题:在上传之前预览图像。

那么这个网站是怎么做到的呢?
2021-03-19 20:23:05
...链接问题的标题是:在上传之前预览图像
2021-03-21 20:23:05
@AmirTugi 该解决方案读取文件。它与用户文件系统上的文件路径无关。
2021-03-23 20:23:05
然而它让我得到了发送到服务器的路径的 URL
2021-04-02 20:23:05
请参阅此链接,因为它帮助我解决了同样的问题。
2021-04-04 20:23:05

尝试这个:

它会给你一个临时路径而不是准确的路径,如果你想在这个 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>");
});

它不完全是您要找的东西,但可能可以在某处帮助您。

在第三行你应该使用 tmppath 变量而不是 URL.createObjectURL(event.target.files[0]),这是更优化的。
2021-03-16 20:23:05
有没有办法用其他文件类型来做到这一点:pdf、docx 等,而不是图像,所以显示一个图标?对于我的用途,我想在发送文件之前将文件存储在页面上,让用户有机会添加评论以上传它,就像带有文本的消息一样。
2021-03-25 20:23:05
@naXa 好,我会在上面编辑我的评论。呃,不幸的是我无法编辑我的评论
2021-03-28 20:23:05
我只需要在浏览器地址栏中放置“tmppath”的内容吗?我试过了,它不起作用。
2021-04-01 20:23:05
@GangsarSwaPurba 不幸的是,它在 IE9 中不起作用 -请参阅 URL.createObjectURL()
2021-04-02 20:23:05

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

当使用 input 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>
尝试了您的代码,但它给了我错误的路径。我的文件在D目录中,但值即将到来C:\fakepath\test.xls
2021-03-11 20:23:05
伙计们,这就是这个问题的全部意义:它永远不会显示实际路径,并且总是将 C:\fakepath\
2021-03-28 20:23:05
C:\fakepath\fileName.xls ... 有谁知道如何解决这个问题?
2021-03-30 20:23:05

你不能。安全性阻止您了解有关客户端计算机的文件系统的任何信息 - 它甚至可能没有!它可以是 MAC、PC、平板电脑或支持互联网的冰箱——您不知道、不知道也不会知道。让您拥有完整路径可以为您提供有关客户端的一些信息 - 例如,特别是如果它是网络驱动器。

事实上,您可以在特定条件下获得它,但它需要一个 ActiveX 控件,并且在 99.99% 的情况下不起作用。

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

你是这个意思吗?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});
这不会给出文件的路径。为什么点赞这么多次?
2021-03-14 20:23:05