如何解决C:\ fakepath？

Question

<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

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

如果这是由于浏览器安全问题,那么应该采用哪种替代方法呢？

Answer 1

某些浏览器具有安全功能,可防止JavaScript知道文件的本地完整路径.这是有道理的 - 作为客户端,您不希望服务器知道本地计算机的文件系统.如果所有浏览器都这样做会很好.

Answer 2

使用

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

代替

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

Answer 3

如果您转到Internet Explorer,工具,Internet选项,安全性,自定义,找到"将文件上载到服务器时包括本地目录路径"(这是相当不错的方法)并单击"启用".这会奏效

Answer 4

我在输入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;
}

Answer 5

我很高兴浏览器能够将我们从侵入式脚本等中拯救出来.我不满意IE在浏览器中放入一些简单的样式修复看起来像黑客攻击!

我使用<span>来表示文件输入,以便我可以将适当的样式应用于<div>而不是<input>(再次,因为IE).现在由于这个IE想要向用户展示一个价值的路径,这个价值只是保证让他们保持警惕并且至少让人担心(如果不是完全吓唬他们的话!)...更多IE-CRAP!

无论如何,感谢那些在这里发布解释的人:IE浏览器安全:在输入[type ="file"]中将"伪路径"附加到文件路径,我把一个小修复器 - 上层...

下面的代码做了两件事 - 它修复了一个lte IE8错误,其中onChange事件在上传字段的onBlur之前不会触发,并且它更新了一个元素,其中清理的文件路径不会吓到用户.

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

Answer 6

在基于 Chrome/Chromium 的应用程序（例如 Electron）上，您可以只使用 target.files：

（我在这个例子中使用React JS）

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

我File object上面所说的看起来像这样：

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

所以fullName如果你想得到路径，你就可以得到。

请注意，这仅适用于 chrome/chromium 浏览器，因此如果您不必支持其他浏览器（例如您正在构建电子项目），则可以使用它。

Answer 7

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

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