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

How to get full path of selected file on change of <input type=‘file’> using javascript, jquery-ajax?

本文关键字：类型 输入 file jquery-ajax javascript 使用 何获得 文件 路径      更新时间：2023-09-26

如何在使用<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变量包含所选文件的only name，而不是full path。
我在网上搜索了它，但似乎出于安全原因浏览器(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的相关问题:在上传之前预览图像

Try This:

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

这不是你要找的东西，但也许它能帮到你。

您不能这样做-浏览器将不允许这样做，因为安全问题。

当使用input type=file对象选择文件时，其值为属性的值取决于"Include local"的值上传文件到服务器时的目录路径"的安全设置用于显示包含该输入的Web页面的安全区域对象。

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

和

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

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

<script type="text/javascript">
    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });
</script>

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

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

你不能用它来恢复文件到原始位置(因为你绝对无法控制下载的存储位置，或者即使它们被存储)，所以在实践中，它对你来说没什么用。

您可以使用以下代码获取上传文件的工作本地URL:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>

你是认真的吗?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});

一个有趣的注意事项:虽然这在web上不可用，如果你在电子中使用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也支持

这是我的工作解决方案

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

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

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

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

使用jQuery从文件输入的完整路径
如何从Firefox 3中的HTML输入表单中获取文件路径

文件元素有一个数组调用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);

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

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

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

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

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

这是正确的格式

相关文章：