如何获得文件的完整路径,同时选择文件使用<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只包含所选文件的名称,而不是完整的路径。 我在网上搜索了一下,但似乎出于安全原因,浏览器(FF,chrome)只给出了文件的名称。 是否有其他方法获得所选文件的完整路径?


你不能这样做——出于安全考虑,浏览器不允许这样做。

When a file is selected by using the input type=file object, the value of the value property depends on the value of the "Include local directory path when uploading files to a server" security setting for the security zone used to display the Web page containing the input object. The fully qualified filename of the selected file is returned only when this setting is enabled. When the setting is disabled, Internet Explorer 8 replaces the local drive and directory path with the string C:\fakepath\ in order to prevent inappropriate information disclosure.

和其他

你错过了);这是在change事件函数的末尾。

也不要为change事件创建函数,而是像下面这样使用它,

<script type="text/javascript">

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

</script>

你不应该这样做……我认为在最新的浏览器中尝试它是无用的(据我所知)…另一方面,所有最新的浏览器都不允许这样…

其他一些链接,你可以通过,找到一个解决方案,如获得价值服务器端,但不是在客户端(javascript)

使用jQuery从文件输入的完整路径 如何从HTML输入形式在Firefox 3的文件路径


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

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

https://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

edit:如果你需要文件的路径来读取一个文件,你可以使用FileReader API代替。这里有一个关于SO的相关问题:在上传之前预览图像。


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

事实上,你可以在特定的条件下得到它,但它需要一个ActiveX控件,并且在99.99%的情况下不会工作。

你不能用它来恢复文件到原来的位置(因为你完全无法控制下载文件存储在哪里,甚至它们是否被存储),所以在实践中它对你没有多大用处。


试试这个:

它会给你一个临时路径,而不是准确的路径,你可以使用这个脚本,如果你想显示选定的图像在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>");
});

这不是你要找的东西,但也许它能在某个地方帮到你。


你是认真的吗?

$('#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>

可以,如果你可以选择上传整个文件夹的话

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

更改事件将包含:

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

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


文件元素和数组调用文件,它包含所有必要的东西,你需要

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

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

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

一个有趣的提示:虽然这在网上是不可用的,如果你在Electron中使用JS,那么你可以这样做。

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

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


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

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


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

这是正确的形式。


这对我来说是个可行的解决方案

const path = (window.URL || window.webkitURL).createObjectURL(file);

它将返回一个blob URL以本地访问该文件。