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


当前回答

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

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.

和其他

你错过了);这是在change事件函数的末尾。

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

<script type="text/javascript">

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

</script>

其他回答

这对我来说是个可行的解决方案

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

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

你可以使用下面的代码来获取上传文件的本地URL:

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

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

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

你是认真的吗?

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

试试这个:

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

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