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

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很多,而且必须使用本地文件.

我们一直在使用的是"Web Server for Chrome".你启动它,选择希望使用的文件夹并转到URL(如你选择的127.0.0.1:port)

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

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

Answer 2

好的伙计们,我完全理解这个错误信息背后的安全原因,但有时候,我们确实需要一个解决方法......而且这是我的.它使用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..>使用此代码替换这些元素,以调用我的Angular控制器中的函数...

<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.Net项目中,我添加了一个Handler文件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文件,并传递我们要打开的文件的路径+文件名.

此Handler代码加载文件,然后将其内容传回HTTP响应中.

完成工作后,网页会打开外部文件.

P!再一次 - 有一个原因,Chrome会抛出这个" Not allowed to load local resources"异常,所以谨慎对待这个...但我发布此代码只是为了证明这是一个相当简单的方法来解决这个限制.

最后一条评论:原始问题想要打开文件" C:\002.jpg".你不能这样做.您的网站将位于一台服务器上(使用自己的C:驱动器)并且无法直接访问用户自己的C:驱动器.因此,您可以做的最好的事情是使用像我这样的代码来访问网络驱动器上的某些文件.

Answer 3

出于安全原因,Chrome专门以这种方式阻止本地文件访问.

这是一篇解决Chrome中的标志(并打开系统漏洞)的文章:

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

Answer 4

There is a workaround using Web Server for Chrome.
Here are the steps:

1. Add the Extension to chrome.
2. Choose the folder (C:\images) and launch the server on your desired port.

Now easily access your local file:

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: You might need to select the CORS Header option from advanced setting incase you face any error any cross origin access error.

Answer 5

1）打开终端并输入

npm install -g http-server

2）转到您要提供文件的根文件夹，然后键入：

http-server ./

3）读取终端的输出，http://localhost:8080将会出现一些错误。

那里的一切都将被允许拿到。例：

background: url('http://localhost:8080/waw.png');

Answer 6

当我使用 PHP 作为服务器端语言并且解决方法是在将结果发送到客户端之前生成我的图像的 base64 编码时会出现这个问题

$path = 'E:/pat/rwanda.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

我认为可能会给某人创造自己的工作的想法

谢谢

Answer 7

您将无法在项目目录之外或从用户级目录加载图像，因此“无法访问本地资源警告”。

但是，如果您要将文件放在项目的根文件夹中，例如 in{rootFolder}\Content\my-image.jpg并像这样引用它：

<img src="/Content/my-image.jpg" />