如何解析C:\ fakepath?


256
<input type="file" id="file-id" name="file_name" onchange="theimage();">

这是我的上传按钮。

<input type="text" name="file_path" id="file-path">

这是我必须显示文件完整路径的文本字段。

function theimage(){
 var filename = document.getElementById('file-id').value;
 document.getElementById('file-path').value = filename;
 alert(filename);
}

这是解决我问题的JavaScript。但是在警戒值给了我

C:\fakepath\test.csv 

Mozilla给了我:

test.csv

但是我想要本地标准文件路径。如何解决这个问题?

如果这是由于浏览器安全性问题引起的,那么应该采取什么替代方法呢?


41
这是浏览器的安全性实现-浏览器可以保护您避免访问磁盘结构。如果您可以解释为什么需要完整的路径,可能会有所帮助。
Stuart

1
完整网址是什么意思?上传文件的地址?
gor

4
记录下来,IE只给出了“ fakepath”位,因为他们不希望“期望”路径的服务器中断。否则,出于安全原因,就像其他浏览器一样,您将仅获得文件名(无路径)。更重要的是,除非您有恶意,否则我看不出为什么知道路径会提供有用的信息。
scunliffe 2011年

2
browser security issue〜如果在浏览器中实现(这是正确的),那么它是极不可能的,你可以绕过它
罗斯

13
天哪,我将所有文件都保存在中C:\fakepath,所以现在每个人都知道我的目录结构。
mbomb007

Answers:


173

某些浏览器具有一项安全功能,该功能阻止JavaScript知道文件的本地完整路径。这很有意义-作为客户端,您不希望服务器知道本地计算机的文件系统。如果所有浏览器都这样做,那就太好了。


9
如果浏览器未发送本地文件路径,则无法找到它。
2011年

47
只需发布表格:浏览器将负责上传。您的网站不需要知道客户端的完整路径。
Rup

2
@ruffp您只能上载帖子,因此您需要将上载放在表单中并提交。这样仍将使用标准文件上传控件来选择文件,并且您仍然不需要完整的客户端文件名。
Rup

6
我怀疑,如果没有某种受信任的插件(例如Flash或Java),普通网站对您的本地计算机是否会造成恶意攻击。这更多的是隐私问题。例如,如果从您的桌面,你要上传,你会让服务器知道你的本地计算机或域(您的用户名c:\users\myname\desktop/Users/myname/Desktop/或其他)。网络服务器没有任何业务知识。
Joe Enos 2013年

8
隐私几乎总是与安全性和脆弱性相关,因为可以对某人使用信息。攻击经常利用多个问题来实现目标。如果没有其他的偏执狂研讨会,除了Hello World以外,任何不允许意识到危险的人都不得进入代码之外。
Archimedix

70

document.getElementById("file-id").files[0].name; 

代替

document.getElementById('file-id').value

16
在Chrome 44.0.2403.125中,这仅为您提供文件名。
差距

4
然后使用document.getElementById(“ file-id”)。files [0] .path。对我来说很好。
Loaderon

谢谢@Loaderon,您应该将其发布为答案!
7geeky

45

onchange对于输入文件类型,我在输入事件上使用对象FileReader !本示例使用readAsDataURL函数,因此您应该有一个标记。FileReader对象还具有readAsBinaryString来获取二进制数据,该二进制数据以后可用于在服务器上创建相同的文件

例:

var input = document.getElementById("inputFile");
var fReader = new FileReader();
fReader.readAsDataURL(input.files[0]);
fReader.onloadend = function(event){
    var img = document.getElementById("yourImgTag");
    img.src = event.target.result;
}

知道为什么连本地主机都不能用吗?源设置为src =“ C:\ fakepath \ filename.jpg”,但console.logging image元素表示src是dataURL
galki 2015年

答案:骨干网重新渲染:/
galki 2015年

1
您不知道该条目节省了多少挫败感。这真是一颗钻石……只有12票得票,但值得更多。很高兴我往下看,因为其他具有较高投票权的条目无法正常工作,FormData()也无法达到我们的目的。做得好!
user1585204

9
问题是要文件路径而不是文件内容。
昆汀

@Quentin:是的,您是对的,但是很显然,OP的意图是能够以某种方式将文件上传到服务器。因此,这种解决方案对所有寻求使用JS将文件上传到服务器的方式的人来说无疑是非常有帮助的。
user18490

36

如果您转到Internet Explorer,工具,Internet选项,安全性,自定义,请找到“将文件上传到服务器时包含本地目录路径”(相当麻烦),然后单击“启用”。这会工作


2
有和Chrome类似的东西吗?
Zaven Zareyan '19

11

我很高兴浏览器关心将我们从侵入性脚本等中拯救出来。我不满意IE在浏览器中添加一些使简单的样式修复看起来像黑客攻击的东西!

我使用<span>表示文件输入,以便可以对<div>而不是<input>应用适当的样式(再次,由于IE)。现在,由于该IE,我们希望向用户显示一条路径,该路径的值仅能保证使他们警惕,并且至少可以使他们感到忧虑(如果不能完全吓退他们呢!!)……更多IE-CRAP!

无论如何,这要归功于那些在此处发布说明的人:IE浏览器安全性:在输入[type =“ file”]中将“ fakepath”追加到文件路径,我整理了一个小的修复程序...

下面的代码有两件事-修复了IE8的IE8错误,该错误在上载字段的onBlur之前不会触发onChange事件,并且它使用不会吓到用户的干净文件路径更新元素。

// self-calling lambda to for jQuery shorthand "$" namespace
(function($){
    // document onReady wrapper
    $().ready(function(){
        // check for the nefarious IE
        if($.browser.msie) {
            // capture the file input fields
            var fileInput = $('input[type="file"]');
            // add presentational <span> tags "underneath" all file input fields for styling
            fileInput.after(
                $(document.createElement('span')).addClass('file-underlay')
            );
            // bind onClick to get the file-path and update the style <div>
            fileInput.click(function(){
                // need to capture $(this) because setTimeout() is on the
                // Window keyword 'this' changes context in it
                var fileContext = $(this);
                // capture the timer as well as set setTimeout()
                // we use setTimeout() because IE pauses timers when a file dialog opens
                // in this manner we give ourselves a "pseudo-onChange" handler
                var ieBugTimeout = setTimeout(function(){
                    // set vars
                    var filePath     = fileContext.val(),
                        fileUnderlay = fileContext.siblings('.file-underlay');
                    // check for IE's lovely security speil
                    if(filePath.match(/fakepath/)) {
                        // update the file-path text using case-insensitive regex
                        filePath = filePath.replace(/C:\\fakepath\\/i, '');
                    }
                    // update the text in the file-underlay <span>
                    fileUnderlay.text(filePath);
                    // clear the timer var
                    clearTimeout(ieBugTimeout);
                }, 10);
            });
        }
    });
})(jQuery);

请注意,这不适用于IE,因此;我替换了以下内容:filePath.substring(filePath.lastIndexOf('\\')+ 1,filePath.length)
巴塞尔Kh

6

我遇到了同样的问题。在IE8中,可以通过在文件输入控件之后创建隐藏输入来解决此问题。用它的前一个兄弟的值填充它。在IE9中,此问题也已修复。

我想了解完整路径的原因是在上传之前创建javascript图像预览。现在,我必须上传文件以创建所选图像的预览。


1
如果某人想在上传之前查看图片,可以在计算机上查看。
mbomb007 '18

4

如果您确实需要发送上载文件的完整路径,则可能必须使用签名的Java applet之类的东西,因为如果浏览器不发送该信息,则无法获取该信息。


如何全路径原始路径<input type =“ file” accept =“。jpeg,.jpg,.png”>。i正在获取伪路径,如何重新使用它
Govind Sharma


1

使用文件阅读器:

$(document).ready(function() {
        $("#input-file").change(function() {
            var length = this.files.length;
            if (!length) {
                return false;
            }
            useImage(this);
        });
    });

    // Creating the function
    function useImage(img) {
        var file = img.files[0];
        var imagefile = file.type;
        var match = ["image/jpeg", "image/png", "image/jpg"];
        if (!((imagefile == match[0]) || (imagefile == match[1]) || (imagefile == match[2]))) {
            alert("Invalid File Extension");
        } else {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(img.files[0]);
        }

        function imageIsLoaded(e) {
            $('div.withBckImage').css({ 'background-image': "url(" + e.target.result + ")" });

        }
    }

-1

嗨,在我的情况下,我正在使用asp.net开发环境,因此我想在asynchronus ajax请求中上传这些数据,在[webMethod]中您无法捕获文件上传器,因为它不是静态元素,所以我不得不通过固定路径进行此类解决方案的周转,而不是将所需的图像转换为字节以将其保存在DB中。

这是我的JavaScript函数,希望对您有所帮助:

function FixPath(Path)
         {
             var HiddenPath = Path.toString();
             alert(HiddenPath.indexOf("FakePath"));

             if (HiddenPath.indexOf("FakePath") > 1)
             {
                 var UnwantedLength = HiddenPath.indexOf("FakePath") + 7;
                 MainStringLength = HiddenPath.length - UnwantedLength;
                 var thisArray =[];
                 var i = 0;
                 var FinalString= "";
                 while (i < MainStringLength)
                 {
                     thisArray[i] = HiddenPath[UnwantedLength + i + 1];
                     i++;
                 }
                 var j = 0;
                 while (j < MainStringLength-1)
                 {
                     if (thisArray[j] != ",")
                     {
                         FinalString += thisArray[j];
                     }
                     j++;
                 }
                 FinalString = "~" + FinalString;
                 alert(FinalString);
                 return FinalString;
             }
             else
             {
                 return HiddenPath;
             }
         }

这里仅用于测试:

 $(document).ready(function () {
             FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
         });
// this will give you : ~/EnsaLmadiLiYghiz

-3

补充Sardesh Sharma的答案:

document.getElementById("file-id").files[0].path

完整路径。


undefined在FireFox 75.0中返回给我。是否path真的存在?您是否有相关文档参考?
Jose Manuel AbarcaRodríguez

1
嗨!我尝试自己解决问题并成功使用path后发布了此答案。我不记得我在哪个项目中尝试过此操作,但是我始终使用Google Chrome,也许此解决方案仅适用于该浏览器。由于浏览器更新,它甚至可能已过时。抱歉无法进一步提供帮助:/
Loader,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.