如何在使用javascript,jquery-ajax更改<input type ='file'>时获取所选文件的完整路径？

Question

如何在选择文件时获取文件的完整路径 <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)只是给出文件名.
有没有其他方法来获取所选文件的完整路径？

Answer 1

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

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

http://jsfiddle.net/SCK5A/

所以不要浪费你的时间.

编辑:如果您需要文件的路径来读取文件,则可以使用FileReader API.以下是关于SO的相关问题:在上传图像之前预览图像.

Answer 2

试试这个:

它会给你一个临时路径不正确的路径,如果你想显示所选图像在此的jsfiddle例子(由selectng图像以及其他文件试试吧),你可以使用这个脚本: -

的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>");
});

它不完全是你想要的,但它可以帮助你在某个地方.

Answer 3

你不能这样做 - 由于安全问题,浏览器不允许这样做.

使用input type = file对象选择文件时,value属性的值取决于用于显示网页的安全区域的"将文件上载到服务器时包括本地目录路径"的安全设置值包含输入对象.

仅当启用此设置时,才会返回所选文件的完全限定文件名.禁用该设置后,Internet Explorer 8将使用字符串C:\ fakepath \替换本地驱动器和目录路径,以防止不适当的信息泄露.

和别的

您);在更改事件功能结束时错过了此操作.

也不要为change事件创建函数而只是使用它,如下所示,

<script type="text/javascript">

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

</script>

Answer 4

你不能.安全性使您无法了解客户端计算机的归档系统 - 它甚至可能没有!它可能是MAC,PC,平板电脑或支持互联网的冰箱 - 你不知道,不知道也不会知道.让你拥有完整的路径可以为你提供有关客户端的一些信息 - 特别是如果它是一个网络驱动器.

实际上,您可以在特定条件下获取它,但它需要ActiveX控件,并且在99.99%的情况下不起作用.

你无法使用它将文件恢复到原始位置(因为你完全无法控制下载的存储位置,或者即使存储了它们),所以在实践中它对你来说并没有多大用处.

Answer 5

你的意思是？

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

Answer 6

一个有趣的注意事项：虽然这在网络上不可用，但如果您在 Electron 中使用 JS，那么您可以这样做。

使用标准 HTML5 文件输入，您将收到path选定文件的额外属性，其中包含真实文件路径。

完整文档在这里：https : //github.com/electron/electron/blob/master/docs/api/file-object.md

Answer 7

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

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