如何获得所选文件的完整路径的改变<输入类型= '文件' >使用javascript, jquery-ajax?

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

1003513 次浏览
小开

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

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

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

和其他

您在更改事件函数的末尾错过了);。

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

<script type="text/javascript">


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


</script>
小开

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

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

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

小开
最佳答案

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

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

https://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

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

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

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

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

小开

试试这个:

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

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

小开

你是认真的吗?

$('#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也支持。

小开

file元素有一个名为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);
小开

只能通过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以本地访问该文件。


提交答案