blocks|key|371886|text|有些浏览器有一个安全特性，可以防止JavaScript知道文件的本地完整路径。这是有意义的-作为一个客户端，您不希望服务器知道您的本地机器的文件系统。如果所有浏览器都这么做，那就太好了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|371887|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Some browsers have a security feature that prevents JavaScript from knowing your file's local full path. It makes sense - as a client, you don't want the server to know your local machine's filesystem. It would be nice if all browsers did this.

blocks|key|372068|text|使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|372069|document.getElementById("file-id").files[0].name;+|code-block|syntax|javascript|372070|而不是|372071|document.getElementById('file-id').value|372072|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Use 

<pre><code>document.getElementById("file-id").files[0].name; 
</code></pre>

instead of 

<pre><code>document.getElementById('file-id').value
</code></pre>

blocks|key|392586|text|对于输入文件类型，我使用输入onchange事件上的对象onchange！这个例子使用readAsDataURL函数，因此您应该有一个标记。FileReader对象还具有获取二进制数据的readAsBinaryString，这些数据稍后可用于在服务器上创建相同的文件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|392587|示例：|392588|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;
}|code-block|syntax|javascript|392589|entityMap^0|E|8|S|8|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

I use the object FileReader on the input <code>onchange</code> event for your input file type! This example uses the readAsDataURL function and for that reason you should have an tag. The FileReader object also has readAsBinaryString to get the binary data, which can later be used to create the same file on your server

Example:

<pre><code>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;
}
</code></pre>

blocks|key|371983|text|如果您转到Internet、Tools、Internet选项、Security、Custom，请查找“当将文件上载到服务器时包含本地目录路径”(这是一种非常向下的方式)，然后单击"Enable“。这会起作用的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|371984|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you go to Internet Explorer, Tools, Internet Option, Security, Custom, find the "Include local directory path When uploading files to a server" (it is quite a ways down) and click on "Enable" . This will work

blocks|key|371993|text|我很高兴浏览器能把我们从侵入性脚本中拯救出来等等。我不满意的IE把一些东西到浏览器，使一个简单的风格-修复看起来像一个黑客攻击！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|371994|我使用了一个<+span+>来表示文件输入，这样我就可以将适当的样式应用到<+div+>而不是(再一次，因为IE)。现在，由于IE想要向用户显示一个值的路径，这个值保证了他们的警惕和最不忧虑(如果不是完全吓跑他们呢？！)更多的IE-垃圾！|371995|不管怎么说，感谢那些在这里发布解释的人：IE+Browser+Security:+Appending+"fakepath"+to+file+path+in+input[type="file"]，我把一个小的修复器-上面的.|offset|length|371996|下面的代码做了两件事--它修复了一个lte+IE8错误，其中onChange事件直到上传字段的onBlur才会触发，并且它用一个清理过的文件路径更新一个元素，不会吓到用户。|371997|//+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++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+
++++++++++++++++++++fileUnderlay.text(filePath);
++++++++++++++++++++//+clear+the+timer+var
++++++++++++++++++++clearTimeout(ieBugTimeout);
++++++++++++++++},+10);
++++++++++++});
++++++++}
++++});
})(jQuery);|code-block|syntax|javascript|371998|entityMap|0|LINK|mutability|MUTABLE|url|http://www.telerik.com/community/forums/aspnet-ajax/upload/ie8-upload-control-shows-quot-c-fakepath-quot.aspx^0|0|0|K|24|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$F|Z|G|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I am happy that browsers care to save us from intrusive scripts and the like. I am not happy with IE putting something into the browser that makes a simple style-fix look like a hack-attack!

I've used a &lt; span > to represent the file-input so that I could apply appropriate styling to the &lt; div > instead of the &lt; input > (once again, because of IE). Now due to this IE want's to show the User a path with a value that's just guaranteed to put them on guard and in the very least apprehensive (if not totally scare them off?!)... MORE IE-CRAP!

Anyhow, thanks to to those who posted the explanation here: <a href="http://www.telerik.com/community/forums/aspnet-ajax/upload/ie8-upload-control-shows-quot-c-fakepath-quot.aspx">IE Browser Security: Appending "fakepath" to file path in input[type="file"]</a>, I've put together a minor fixer-upper...

The code below does two things - it fixes a lte IE8 bug where the onChange event doesn't fire until the upload field's onBlur and it updates an element with a cleaned filepath that won't scare the User.

<pre><code>// 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 &lt;span&gt; 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 &lt;div&gt;
 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 &lt;span&gt;
 fileUnderlay.text(filePath);
 // clear the timer var
 clearTimeout(ieBugTimeout);
 }, 10);
 });
 }
 });
})(jQuery);
</code></pre>

blocks|key|371951|text|我也遇到了同样的问题。在IE8中，可以通过在文件输入控件之后创建一个隐藏输入来解决这个问题。用它以前的同级值填充这个值。在IE9中，这也是固定的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|371952|我想了解完整路径的原因是在上传之前创建一个javascript图像预览。现在我必须上传文件来创建所选图像的预览。|371953|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I came accross the same problem. In IE8 it could be worked-around by creating a hidden input after the file input control. The fill this with the value of it's previous sibling. In IE9 this has been fixed aswell.

My reason in wanting to get to know the full path was to create an javascript image preview before uploading. Now I have to upload the file to create a preview of the selected image.

blocks|key|2511935|text|如果您确实需要发送上传文件的完整路径，那么您可能需要使用类似签名的java+applet之类的东西，因为如果浏览器不发送这些信息，就无法获得这些信息。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2511936|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you really need to send the full path of the uploded file, then you'd probably have to use something like a signed java applet as there isn't any way to get this information if the browser doesn't send it.

blocks|key|392709|text|使用文件阅读器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|392710|$(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])+%7C%7C+(imagefile+==+match[1])+%7C%7C+(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("+%2B+e.target.result+%2B+")"+});

++++++++}
++++}|code-block|syntax|javascript|392711|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Use file readers:

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

 }
 }
</code></pre>

blocks|key|392626|text|似乎您无法通过js在本地主机中找到完整的路径，但是您可以隐藏fakepath来显示文件名。Use+jQuery+to+get+the+file+input's+selected+filename+without+the+path|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|392627|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6365858/use-jquery-to-get-the-file-inputs-selected-filename-without-the-path/6365883#6365883^0|19|1X|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

seems you can't find the full path in you localhost by js, but you can hide the fakepath to just show the file name. <a href="https://stackoverflow.com/questions/6365858/use-jquery-to-get-the-file-inputs-selected-filename-without-the-path/6365883#6365883">Use jQuery to get the file input&#39;s selected filename without the path</a>

blocks|key|392780|text|您至少可以获得计算机上文件路径的临时副本。这里唯一的条件是输入元素应该在表单中，您必须做的其他事情是在表单中添加一个属性enctype，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|392781|<form+id="formid"+enctype="multipart/form-data"+method="post"+action="{{url('/add_a_note'+)}}">...</form>|code-block|syntax|javascript|392782|​|392783|📷|atomic|392784|您可以在底部找到路径字符串。它打开流到文件，然后删除它。|392785|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/6b3c7eea6a407704ff2b0e20044fa495.jpg|imageAlt^0|1O|7|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|P|3|Q|5|6|7|19|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y|Z|-4]]]]

You would be able to get at least temporary created copy of the file path on your machine. The only condition here is your input element should be within a form
What you have to do else is putting in the form an attribute <code>enctype</code>, e.g.:
<pre><code>&lt;form id=&quot;formid&quot; enctype=&quot;multipart/form-data&quot; method=&quot;post&quot; action=&quot;{{url('/add_a_note' )}}&quot;&gt;...&lt;/form&gt;
</code></pre>
<a href="https://i.stack.imgur.com/e6Ibd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e6Ibd.jpg" alt="enter image description here" /></a>
you can find the path string at the bottom.
It opens stream to file and then deletes it.

blocks|key|392677|text|在这里，在我的例子中，我使用的是asp.net开发环境，所以我想在异步ajax请求中上传这些数据，而在webMethod中，您无法捕获文件上载器，因为它不是静态元素，所以我不得不通过修复路径来完成这种解决方案的转换，而不是将想要的映像转换成字节，以便将其保存在DB中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|392678|这里是我的javascript函数，希望它能帮助您：|392679|function+FixPath(Path)
+++++++++{
+++++++++++++var+HiddenPath+=+Path.toString();
+++++++++++++alert(HiddenPath.indexOf("FakePath"));

+++++++++++++if+(HiddenPath.indexOf("FakePath")+>+1)
+++++++++++++{
+++++++++++++++++var+UnwantedLength+=+HiddenPath.indexOf("FakePath")+%2B+7;
+++++++++++++++++MainStringLength+=+HiddenPath.length+-+UnwantedLength;
+++++++++++++++++var+thisArray+=[];
+++++++++++++++++var+i+=+0;
+++++++++++++++++var+FinalString=+"";
+++++++++++++++++while+(i+<+MainStringLength)
+++++++++++++++++{
+++++++++++++++++++++thisArray[i]+=+HiddenPath[UnwantedLength+%2B+i+%2B+1];
+++++++++++++++++++++i%2B%2B;
+++++++++++++++++}
+++++++++++++++++var+j+=+0;
+++++++++++++++++while+(j+<+MainStringLength-1)
+++++++++++++++++{
+++++++++++++++++++++if+(thisArray[j]+!=+",")
+++++++++++++++++++++{
+++++++++++++++++++++++++FinalString+%2B=+thisArray[j];
+++++++++++++++++++++}
+++++++++++++++++++++j%2B%2B;
+++++++++++++++++}
+++++++++++++++++FinalString+=+"~"+%2B+FinalString;
+++++++++++++++++alert(FinalString);
+++++++++++++++++return+FinalString;
+++++++++++++}
+++++++++++++else
+++++++++++++{
+++++++++++++++++return+HiddenPath;
+++++++++++++}
+++++++++}|code-block|syntax|javascript|392680|这里只供测试：|392681|+$(document).ready(function+()+{
+++++++++++++FixPath("hakounaMatata:/7ekmaTa3mahaLaziz/FakePath/EnsaLmadiLiYghiz");
+++++++++});
//+this+will+give+you+:+~/EnsaLmadiLiYghiz|392682|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Hy there , in my case i am using asp.net development environment, so i was want to upload those data in asynchronus ajax request , in [webMethod] you can not catch the file uploader since it is not static element , 
so i had to make a turnover for such solution by fixing the path , than convert the wanted image into bytes to save it in DB . 

Here is my javascript function , 
hope it helps you: 

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

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

here only for testing : 

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

<pre><code>&lt;input type="file" id="file-id" name="file_name" onchange="theimage();"&gt;
</code></pre>

This is my upload button.

<pre><code>&lt;input type="text" name="file_path" id="file-path"&gt;
</code></pre>

This is the text field where I have to show the full path of the file.

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

This is the JavaScript which solve my problem. But in the alert value gives me 

<pre><code>C:\fakepath\test.csv 
</code></pre>

and Mozilla gives me:

<pre><code>test.csv
</code></pre>

But I want the local fully qualified file path. How to resolve this issue?

If this is due to browser security issue then what should be the alternate way to do this?

How to resolve the C:\fakepath?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问如何解析C:\fakepath？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解析C:\fakepath？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何解析C:\fakepath？
EN