如何使用javascript，jquery-ajax在<input type='file'>更改时获取所选文件的完整路径？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15201071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?
提问by Yogesh Pingle
How to get full path of file while selecting file using <input type=‘file'>
如何在使用选择文件时获取文件的完整路径 <input type=‘file'>
<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
$('input[type=file]').change(function () {
var filePath=$('#fileUpload').val();
});
}
</script>
but the filePath var contains only nameof selected file, not the full path.
I searched it on net, but it seems that for security reasons browsers (FF,chrome) just give name of file.
Is there any other way to get full path of selected file?
但 filePath var 包含only name所选文件，而不是full path.
我在网上搜索过它，但出于安全原因，浏览器（FF，chrome）似乎只给出了文件名。
有没有其他方法可以获得所选文件的完整路径？
采纳答案by undefined
For security reasons browsers do not allow this, i.e. JavaScript in browser has no access to the File System, however using HTML5 File API, only Firefox provides a mozFullPathproperty, but if you try to get the value it returns an empty string:
出于安全原因浏览器不允许这样做，即浏览器中的 JavaScript 无法访问文件系统，但是使用 HTML5 文件 API，只有 Firefox 提供一个mozFullPath属性，但如果您尝试获取该值，它将返回一个空字符串：
$('input[type=file]').change(function () {
console.log(this.files[0].mozFullPath);
});
So don't waste your time.
所以不要浪费你的时间。
edit: If you need the file's path for reading a file you can use the FileReaderAPI instead. Here is a related question on SO: Preview an image before it is uploaded.
编辑：如果您需要文件的路径来读取文件，您可以改用FileReaderAPI。这是关于 SO 的相关问题：在上传图像之前预览图像。
回答by DWX
Try This:
尝试这个：
It'll give you a temporary path not the accurate path, you can use this script if you want to show selected images as in this jsfiddle example(Try it by selectng images as well as other files):-
它会给你一个临时路径而不是准确的路径，如果你想在这个 jsfiddle 示例中显示选定的图像，你可以使用这个脚本（通过选择图像和其他文件来尝试）：-
Here is the code :-
这是代码：-
HTML:-
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:-
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>");
});
Its not exactly what you were looking for, but may be it can help you somewhere.
它不完全是您要找的东西，但可能可以在某处帮助您。
回答by Dipesh Parmar
You cannot do so - the browser will not allow this because of security concerns.
您不能这样做 - 出于安全考虑，浏览器将不允许这样做。
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.
当使用 input type=file 对象选择文件时，value 属性的值取决于用于显示网页的安全区域的“将文件上传到服务器时包括本地目录路径”安全设置的值包含输入对象。
仅当启用此设置时，才返回所选文件的完全限定文件名。当该设置被禁用时，Internet Explorer 8 将本地驱动器和目录路径替换为字符串 C:\fakepath\ 以防止不适当的信息泄露。
And other
和别的
You missed );this at the end of the change event function.
您);在更改事件功能结束时错过了这一点。
Also do not create function for change event instead just use it as below,
也不要为更改事件创建函数，而只是使用它，如下所示，
<script type="text/javascript">
$(function()
{
$('#fileUpload').on('change',function ()
{
var filePath = $(this).val();
console.log(filePath);
});
});
</script>
回答by Rajshekar Reddy
You can't. Security stops you for knowing anything about the filing system of the client computer - it may not even have one! It could be a MAC, a PC, a Tablet or an internet enabled fridge - you don't know, can't know and won't know. And letting you have the full path could give you some information about the client - particularly if it is a network drive for example.
你不能。安全性阻止您了解有关客户端计算机的文件系统的任何信息 - 它甚至可能没有！它可以是 MAC、PC、平板电脑或支持互联网的冰箱——您不知道、不知道也不会知道。让您拥有完整路径可以为您提供有关客户端的一些信息 - 例如，特别是如果它是网络驱动器。
In fact you can get it under particular conditions, but it requires an ActiveX control, and will not work in 99.99% of circumstances.
事实上，您可以在特定条件下获得它，但它需要一个 ActiveX 控件，并且在 99.99% 的情况下不起作用。
You can't use it to restore the file to the original location anyway (as you have absolutely no control over where downloads are stored, or even if they are stored) so in practice it is not a lot of use to you anyway.
您无论如何都不能使用它来将文件恢复到原始位置（因为您完全无法控制下载的存储位置，或者即使它们被存储），因此实际上它对您没有多大用处。
回答by Aytac Gul
Did you mean this?
你是这个意思吗？
$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
$("img").fadeIn("fast").attr('src',tmppath);
});
回答by Steffen Brem
You can use the following code to get a working local URL for the uploaded file:
您可以使用以下代码获取上传文件的有效本地 URL：
<script type="text/javascript">
var path = (window.URL || window.webkitURL).createObjectURL(file);
console.log('path', path);
</script>
回答by Tim Perry
One interesting note: although this isn't available in on the web, if you're using JS in Electron then you can do this.
一个有趣的注意事项：虽然这在网络上不可用，但如果您在 Electron 中使用 JS，那么您可以这样做。
Using the standard HTML5 file input, you'll receive an extra pathproperty on selected files, containing the real file path.
使用标准 HTML5 文件输入，您将收到path选定文件的额外属性，其中包含真实文件路径。
Full docs here: https://github.com/electron/electron/blob/master/docs/api/file-object.md
完整文档在这里：https: //github.com/electron/electron/blob/master/docs/api/file-object.md
回答by phil294
You can, if uploading an entire folder is an option for you
您可以，如果您可以选择上传整个文件夹
<input type="file" webkitdirectory directory multiple/>
change event will contain:
更改事件将包含：
.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"
回答by bipen
you should never do so... and I think trying it in latest browsers is useless(from what I know)... all latest browsers on the other hand, will not allow this...
你永远不应该这样做......我认为在最新的浏览器中尝试它是没用的（据我所知）......另一方面，所有最新的浏览器都不允许这样做......
some other links that you can go through, to find a workaround like getting the value serverside, but not in clientside(javascript)
您可以通过其他一些链接来找到解决方法，例如获取服务器端的值，但不是在客户端（javascript）
Full path from file input using jQuery
How to get the file path from HTML input form in Firefox 3
回答by Jeeva Kumar
file element has and array call filesit contain all necessary stuff you need
文件元素有和数组调用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);
