如何使用JavaScript,jquery-ajax在更改时获取所选文件的完整路径?

2020/10/10 11:21 · javascript ·  · 0评论

使用选择文件时如何获取文件的完整路径 <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 File API时,只有Firefox提供了mozFullPath属性,但是如果您尝试获取该值,它将返回一个空字符串:

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

http://jsfiddle.net/SCK5A/

所以不要浪费你的时间。

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

尝试这个:

它会为您提供一个临时路径,而不是准确的路径,如果您要显示此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>");
});

它并不完全是您想要的,但也许可以在某个地方为您提供帮助。

您不能这样做-由于安全方面的考虑,浏览器将不允许这样做。

通过使用输入type = file对象选择文件时,value属性的值取决于用于显示Web页面的安全区域的“将文件上传到服务器时包括本地目录路径”的安全设置的值。包含输入对象。

仅当启用此设置时,才返回所选文件的标准文件名。禁用此设置后,Internet Explorer 8将本地驱动器和目录路径替换为字符串C:\ fakepath \,以防止出现不适当的信息泄露。

和别的

);在更改事件功能的末尾错过了这一点。

也不要为变更事件创建函数,而是按如下方式使用它,

<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>

一个有趣的注意事项:尽管Web上没有此功能,但是如果您在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"

您永远都不要这样做...我认为在最新的浏览器中尝试是没有用的(据我所知)...另一方面,所有最新的浏览器都不允许这样做...

您可以通过其他一些链接找到解决方法,例如获取服务器端的价值,而不是在客户端(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);

您可以获取所选文件的完整路径,以仅通过IE11和MS Edge上传。

var fullPath = Request.Form.Files["myFile"].FileName;
本文地址:http://javascript.askforanswer.com/ruheshiyongjavascriptjquery-ajaxzaigenggaishihuoqusuoxuanwenjiandewanzhenglu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!