Javascript 如何解决C:\fakepath？

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

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

Mozilla给了我：

C:\fakepath\test.csv 

但我需要本地完全限定的文件路径。如何解决这个问题

---

如果这是由于浏览器安全问题造成的，那么应该用什么替代方法来实现呢？

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

如果你真的需要发送上传文件的完整路径，那么你可能必须使用签名java小程序之类的东西，因为如果浏览器不发送信息，就没有任何方法可以获取这些信息。

我遇到了同样的问题。在IE8中，可以通过在文件输入控件之后创建隐藏输入来解决这个问题。将其上一个同级的值填充到此。在IE9中，这个问题也得到了解决

---

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

如果您转到Internet Explorer、工具、Internet选项、安全、自定义，请在将文件上载到服务器时找到包含本地目录路径，这是一个相当长的过程，然后单击启用。这会起作用的

我很高兴浏览器能帮助我们免受入侵脚本之类的攻击。我不喜欢IE把一些东西放进浏览器，使一个简单的风格修复看起来像黑客攻击

我使用了一个来表示文件输入，这样我就可以再次对

应用适当的样式，而不是，因为IE。现在，由于IE想向用户显示一个路径，该路径的值保证会让他们警惕，如果不是完全吓跑他们，至少会让他们感到不安？！。。。更多的废话

不管怎样，感谢那些在这里发布解释的人：，我已经准备好了一个小修正器

下面的代码做了两件事-它修复了lte IE8的一个bug，其中onChange事件在upload字段的onBlur出现之前不会触发，并且它用一个清理过的文件路径更新了一个元素，不会吓到用户

test.csv

---

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

例如：

// 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);

---

似乎您无法通过js在本地主机中找到完整路径，但您可以隐藏伪路径以仅显示文件名

使用

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

而不是

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

---

在这里，我使用的是asp.net开发环境，所以我想在异步ajax请求中上载这些数据，在[webMethod]中，您无法捕获文件上载程序，因为它不是静态元素， 因此，我必须通过修复路径来实现这种解决方案的转换，而不是将想要的图像转换为字节以将其保存在DB中

这是我的javascript函数， 希望它能帮助您：

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

使用文件读取器：

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

---

为什么不直接使用target.xml文件呢

我在这个例子中使用React JS

$(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 + ")" });

        }
    }

---

因此，如果您想获得路径，您可以只获取全名。

您至少可以在计算机上获得文件路径的临时创建副本。这里唯一的条件是输入元素应该在表单中 您还需要做的是在表单中输入属性enctype，例如：

您可以在底部找到路径字符串。

---

它将流打开到文件，然后将其删除。

这是浏览器的安全实现-浏览器保护您不访问磁盘结构。如果你能解释一下为什么你想要完整的路径，也许会有帮助。你说的完整url是什么意思？上传文件的地址？作为记录，IE只给出了伪路径位，因为他们不希望服务器期望路径中断。否则，就像其他浏览器一样，出于安全原因，您将只获得文件名而不获取路径。更重要的是，除非你有恶意，否则我不明白为什么知道路径会提供任何有用的东西。浏览器安全问题~如果它在浏览器中正确实现，那么你很可能无法绕过它Gosh darnit，我将所有文件保存在C:\fakepath，所以现在每个人都知道我的目录结构。如果浏览器不发送本地文件路径，就无法找到它。只需发布表单：浏览器将负责上传。您的网站不需要知道返回客户端的完整路径。@ruffp您只能通过帖子上传，因此您需要将上传内容放入表单中并提交。这将仍然使用标准的文件上载控件来选择文件，并且您仍然不需要完整的客户端文件名。我怀疑普通网站是否会对您的本地计算机进行恶意操作

---

---

没有像Flash或Java这样的可信插件。这更像是隐私问题。例如，如果您是从桌面上传，您应该让服务器知道您在本地计算机或域c:\users\myname\desktop或/users/myname/desktop/上的用户名。这不是任何一个网络服务器都知道的。隐私几乎总是与安全性和脆弱性有关，因为信息可能被用来对付某人。攻击经常利用多个问题来实现其目标。如果没有额外的“如何成为偏执狂”研讨会，任何不认识危险的人都不应该被允许靠近除Hello World之外的代码。在Chrome 44.0.2403.125中，这只提供文件名。然后使用document.getElementByIdfile-id.files[0]。path。对我来说效果很好。谢谢@Loaderon，你应该把它作为一个答案发布@Loaderon不是为我工作的。使用chrome 90.0.4430.93如果您想要除内容之外的所有文件元数据，请不要使用.name。您知道为什么在localhost上连这个都不起作用吗？源被设置为src=C:\fakepath\filename.jpg，但console.logging图像元素表示src是一个dataURLanswer:backbone rerendering:/您不知道这个条目节省了多少挫折。这是一颗未加工的钻石。。。只有12票，但值得更多。很高兴我向下看了看，因为其他高得票率的条目不起作用，而且FormData也不能达到我们的目的。做得好！问题是询问文件路径，而不是文件内容。@Quentin:是的，你是对的，但很清楚OP的目的是能够以某种方式将文件上传到服务器。因此，这个解决方案对所有希望使用JS将文件上传到服务器的人来说无疑是非常有用的；我替换了以下内容：filePath.substringfilePath.lastIndexOf'\\'+1，filePath.Length如果有人想在上传前查看图像，他们可以在自己的计算机上查看。是否有类似于Chrome的内容？不，这只是IE。如果我在Firefox中运行您的示例，请使用ReactDOM.render，mountNode；，我得到一个对象，它的属性是lastModified、name、size、type和webkitRelativePath。事实上，正如其他人所说，能够获得完整的路径通常是一个安全/隐私问题。因此，您必须采取其他措施来实现上述结果。是的，如果您可以获得未经修改的文件路径，则将是一个安全缺陷。问题是需要本地完全限定的文件路径。将副本上载到服务器，然后获取其上载到的路径是非常不同的。@Quentin这很简单…因为实际上我不是一个完全意义上的stackoverflower。首先，在将来为自己写作。

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

$(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 + ")" });

        }
    }

const onChange = (event) => {
  const value = event.target.value;

  // this will return C:\fakepath\somefile.ext
  console.log(value);

  const files = event.target.files;

  //this will return an ARRAY of File object
  console.log(files);
}

return (
 <input type="file" onChange={onChange} />
)

{
  fullName: "C:\Users\myname\Downloads\somefile.ext"
  lastModified: 1593086858659
  lastModifiedDate: (the date)
  name: "somefile.ext"
  size: 10235546
  type: ""
  webkitRelativePath: ""
}

<form id="formid" enctype="multipart/form-data" method="post" action="{{url('/add_a_note' )}}">...</form>