Question

如何使用<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）只是给出文件名有没有其他方法可以获得所选文件的完整路径？

Answer 1

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

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

http://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

编辑：如果您需要文件的路径来读取文件，则可以使用FileReader API。以下是关于SO的相关问题：Preview an image before it is uploaded.

Answer 2

试试这个：

它会为您提供一条临时路径而不是准确的路径，如果您想在此jsfiddle示例中显示所选图像，可以使用此脚本（通过selectng图像以及其他文件尝试）： - < / p>

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

它不完全是你想要的，但它可以帮助你在某个地方。

Answer 3

您不能这样做 - 由于安全问题，浏览器不允许这样做。

使用input type = file对象选择文件时，该值   value属性的值取决于“Include local”的值   将文件上载到服务器时的目录路径“安全设置   用于显示包含输入的Web页面的安全区域   对象

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

和其他

您在更改事件功能结束时错过了);。

也不要为更改事件创建函数，而只是使用它，如下所示，

<script type="text/javascript">

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

</script>

Answer 4

你做不到。安全性使您无法了解客户端计算机的归档系统 - 它甚至可能没有！它可能是MAC，PC，平板电脑或支持互联网的冰箱 - 你不知道，不知道也不会知道。让你拥有完整的路径可以为你提供有关客户端的一些信息 - 特别是如果它是一个网络驱动器。

事实上，你可以在特定条件下获得它，但它需要一个ActiveX控件，并且在99.99％的情况下无法工作。

你无论如何都无法使用它将文件恢复到原始位置（因为你完全无法控制下载的存储位置，或者即使存储了它们），所以在实践中它对你来说并不是很有用反正。

Answer 5

你的意思是？

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

Answer 6

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

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

Answer 7

你永远不应该这样做......我认为在最新的浏览器中尝试它是没用的（据我所知）...另一方面，所有最新的浏览器都不允许这样做......

您可以通过的其他一些链接，找到一种解决方法，例如获取值服务器端，但不能访问客户端（javascript）

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

Answer 8

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

，则可以

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

更改事件将包含：

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

Answer 9

文件元素和数组调用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);

Answer 10

您可以获取所选文件的完整路径，以仅通过IE11和MS Edge上传。

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

Answer 11

一个有趣的注意事项：尽管Web上没有此功能，但是如果您在Electron中使用JS，则可以执行此操作。

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

此处提供完整文档：https://github.com/electron/electron/blob/master/docs/api/file-object.md

Answer 12

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

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

Answer 13

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

这是正确的形式。

如何在使用javascript，jquery-ajax更改<input type =“'file'”/>时获取所选文件的完整路径？

13 个答案: