![](/img/trans.png)
[英]How to get a full path of a selected file using <Input Type=“file” />
[英]How to get full path of selected file on change of <input type=‘file’> using 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
。
我在网上搜索过,但出于安全原因,浏览器(FF、chrome)似乎只给出了文件名。
有没有其他方法可以获取所选文件的完整路径?
出于安全原因,浏览器不允许这样做,即浏览器中的 JavaScript 无法访问文件系统,但是使用 HTML5 文件 API,只有 Firefox 提供mozFullPath
属性,但如果您尝试获取该值,它会返回一个空字符串:
$('input[type=file]').change(function () {
console.log(this.files[0].mozFullPath);
});
所以不要浪费你的时间。
编辑:如果您需要文件的路径来读取文件,您可以改用FileReader API。 这是关于 SO 的相关问题: 在上传之前预览图像。
尝试这个:
它会给你一个临时路径而不是准确的路径,如果你想显示选定的图像,你可以使用这个脚本,就像在这个 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>");
});
它不完全是您正在寻找的东西,但它可能会在某个地方为您提供帮助。
您不能这样做 - 出于安全考虑,浏览器不允许这样做。
当使用输入 type=file 对象选择文件时,value 属性的值取决于用于显示网页的安全区域的“将文件上传到服务器时包括本地目录路径”安全设置的值包含输入对象。
仅当启用此设置时,才会返回所选文件的完全限定文件名。 禁用该设置时,Internet Explorer 8 将本地驱动器和目录路径替换为字符串 C:\fakepath\,以防止不适当的信息泄露。
和别的
你错过了);
this 在更改事件函数的末尾。
也不要为更改事件创建函数,而是按如下方式使用它,
<script type="text/javascript">
$(function()
{
$('#fileUpload').on('change',function ()
{
var filePath = $(this).val();
console.log(filePath);
});
});
</script>
你不能。 安全性会阻止您对客户端计算机的文件系统一无所知 - 它甚至可能没有! 它可以是 MAC、PC、平板电脑或支持互联网的冰箱——你不知道、不知道也不会知道。 让您拥有完整路径可以为您提供有关客户端的一些信息 - 例如,特别是如果它是网络驱动器。
事实上,您可以在特定条件下获得它,但它需要 ActiveX 控件,并且在 99.99% 的情况下无法正常工作。
无论如何,您都不能使用它将文件恢复到原始位置(因为您完全无法控制下载的存储位置,或者即使它们被存储),所以实际上它对您来说并没有多大用处。
你是这个意思吗?
$('#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>
一个有趣的注意事项:虽然这在网络上不可用,但如果你在 Electron 中使用 JS,那么你可以这样做。
使用标准 HTML5 文件输入,您将收到所选文件的额外path
属性,其中包含真实文件路径。
完整文档在这里: https ://github.com/electron/electron/blob/master/docs/api/file-object.md
您可以,如果您可以选择上传整个文件夹
<input type="file" webkitdirectory directory multiple/>
更改事件将包含:
.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"
但它不包含整个绝对路径,只包含相对路径。 Firefox 也支持。
你永远不应该这样做......而且我认为在最新的浏览器中尝试它是没有用的(据我所知)......另一方面,所有最新的浏览器都不允许这样做......
您可以通过其他一些链接来找到解决方法,例如获取价值服务器端,但不在客户端(javascript)
可以使用 FileReader API 来更改 img 元素的 src。
https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
文件元素有和数组调用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);
$('input[type=file]').change(function () {
console.log(this.files[0].path);
});
这是正确的形式。
您只能通过 IE11 和 MS Edge 获取要上传的所选文件的完整路径。
var fullPath = Request.Form.Files["myFile"].FileName;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.