如何获得文件的完整路径,同时选择文件使用<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)只给出了文件的名称。 是否有其他方法获得所选文件的完整路径?


当前回答

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

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

https://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

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

其他回答

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

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

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

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

这是正确的形式。

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

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

更改事件将包含:

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

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

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

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

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

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

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