无法打开本地文件 - 铬：不允许加载本地资源

Question

浏览器测试： 版Chrome浏览器：52.0.2743.116

这是一个简单的JavaScript是从本地打开图像文件，如“C：\ 002.jpg'

function run(){ 

    var URL = "file:///C:\002.jpg"; 

    window.open(URL, null); 

} 
run(); 

这是我的示例代码。 https://fiddle.jshell.net/q326vLya/3/

请给我任何适当的建议。

Answer 1

铬特异性阻断访问本地文件这样出于安全原因。

这里是要解决在Chrome中的标志（并打开您的系统容易受到攻击）的文章：

http://www.chrome-allow-file-access-from-file.com/

Answer 2

如果你能做到这一点，这将是一个很大的安全问题，因为你可以访问你的文件系统，可用的数据有可能采取行动......幸运的是，这是不可能做你想做什么。

如果您需要本地的资源来进行访问，你可以尝试在你的机器上启动一个web服务器，在这种情况下你的方法会奏效。其他解决方法是可能的，如作用于Chrome浏览器设置，但我总是喜欢清洁的方式，安装本地Web服务器，也许在不同端口上（不，这不是那么难！）。

参见：

• Open local files(file://) using Chrome
• Opening local files from chrome

Answer 3

好伙计，我完全理解这背后的错误信息安全方面的原因，但有些时候，我们确实需要解决方法......而这是我的。它使用ASP.Net（而不是JavaScript，这个问题是基于这个问题的），但它对希望对某人有用。

我们内部的应用程序有一个网页，用户可以创建快捷方式的整个我们的网络传播有用的文件列表。当他们点击其中一个快捷方式时，我们想要打开这些文件......但当然，Chrome的错误阻止了这一点。

该网页使用AngularJS 1.x中列出的各种快捷键。

最初，我的网页试图直接创建指向文件的<a href..>元素，但是当用户点击其中一个链接时，这会产生“Not allowed to load local resource”错误。

<div ng-repeat='sc in listOfShortcuts' id="{{sc.ShtCut_ID}}" class="cssOneShortcutRecord" > 
    <div class="cssShortcutIcon"> 
     <img ng-src="{{ GetIconName(sc.ShtCut_PathFilename); }}"> 
    </div> 
    <div class="cssShortcutName"> 
     <a ng-href="{{ sc.ShtCut_PathFilename }}" ng-attr-title="{{sc.ShtCut_Tooltip}}" target="_blank" >{{ sc.ShtCut_Name }}</a> 
    </div> 
</div> 

的解决方案是使用此代码来替换那些<a href..>元素，调用一个函数在我的角度控制器...

<div ng-click="OpenAnExternalFile(sc.ShtCut_PathFilename);" > 
    {{ sc.ShtCut_Name }} 
</div> 

函数本身很简单...

$scope.OpenAnExternalFile = function (filename) { 
    // 
    // Open an external file (i.e. a file which ISN'T in our IIS folder) 
    // To do this, we get an ASP.Net Handler to manually load the file, 
    // then return it's contents in a Response. 
    // 
    var URL = '/Handlers/DownloadExternalFile.ashx?filename=' + encodeURIComponent(filename); 
    window.open(URL); 
} 

在我的ASP。网项目，我添加了包含此代码调用DownloadExternalFile.aspx处理程序文件：

namespace MikesProject.Handlers 
{ 
    /// <summary> 
    /// Summary description for DownloadExternalFile 
    /// </summary> 
    public class DownloadExternalFile : IHttpHandler 
    { 
     // We can't directly open a network file using Javascript, eg 
     //  window.open("\\SomeNetworkPath\ExcelFile\MikesExcelFile.xls"); 
     // 
     // Instead, we need to get Javascript to call this groovy helper class which loads such a file, then sends it to the stream. 
     //  window.open("/Handlers/DownloadExternalFile.ashx?filename=//SomeNetworkPath/ExcelFile/MikesExcelFile.xls"); 
     // 
     public void ProcessRequest(HttpContext context) 
     { 
      string pathAndFilename = context.Request["filename"];    // eg "\\SomeNetworkPath\ExcelFile\MikesExcelFile.xls" 
      string filename = System.IO.Path.GetFileName(pathAndFilename);  // eg "MikesExcelFile.xls" 

      context.Response.ClearContent(); 

      WebClient webClient = new WebClient(); 
      using (Stream stream = webClient.OpenRead(pathAndFilename)) 
      { 
       // Process image... 
       byte[] data1 = new byte[stream.Length]; 
       stream.Read(data1, 0, data1.Length); 

       context.Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}", filename)); 
       context.Response.BinaryWrite(data1); 

       context.Response.Flush(); 
       context.Response.SuppressContent = true; 
       context.ApplicationInstance.CompleteRequest(); 
      } 
     } 

     public bool IsReusable 
     { 
      get 
      { 
       return false; 
      } 
     } 
    } 

就是这样。

现在，当用户点击我的某个快捷方式链接时，它会调用OpenAnExternalFile函数，该函数将打开该.ashx文件，并将它传递给我们要打开的文件的路径+文件名。

该处理程序代码加载文件，然后将其内容传回HTTP响应中。

而且，作业完成后，网页打开外部文件。

唷！再说一遍 - Chrome浏览器抛出这个“Not allowed to load local resources”异常是有原因的，所以仔细研究这个......但是我发布这个代码只是为了证明这是一个相当简单的解决方法。

只是最后一条评论：原始问题想打开文件“C:\002.jpg”。你不能这样做。您的网站将位于一台服务器上（使用自己的C：驱动器），并且无法直接访问用户自己的C：驱动器。所以你可以做的最好的就是使用我的代码来访问网络驱动器上某处的文件。

Answer 4

知道这是慈祥的老人，但看到很多这样的问题......

我们使用Chrome很多在课堂上，它是一个必须使用本地文件。

我们一直在使用的是“Web Server for Chrome”。你启动它，选择希望使用的文件夹并转到URL（如你选择的127.0.0.1:port）

这是一个简单的服务器，不能使用PHP，但对于简单的工作，可能是你的解决方案：

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Answer 5

有使用Web Server for Chrome一种变通方法。
以下是步骤：

1. 将扩展名添加到chrome。
2. 选择文件夹（C：\ images）并在您需要的端口上启动服务器 。

现在方便地访问本地文件：

function run(){ 
    // 8887 is the port number you have launched your serve 
    var URL = "http://127.0.0.1:8887/002.jpg"; 

    window.open(URL, null); 

} 
run(); 

PS：柜面你面对任何错误的任何交叉起源访问错误，您可能需要选择高级设置的CORS头选项。