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

测试浏览器: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/]

请给我任何合适的建议。

KBH asked 2019-10-09T02:29:16Z
8个解决方案
38 votes

知道这有点老了,但是看到很多这样的问题...

我们在课堂上经常使用Chrome,这是处理本地文件的必备条件。

我们一直在使用的是“ Chrome浏览器的Web服务器”。 启动它,选择希望使用的文件夹,然后转到URL(例如127.0.0.1:您选择的端口)

这是一个简单的服务器,不能使用PHP,但是为了简单的工作,可能是您的解决方案:

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

Woody answered 2019-10-09T02:29:37Z
14 votes

好的,我完全理解了此错误消息背后的安全原因,但有时,我们确实需要解决方法……这是我的。 它使用ASP.Net(而不是此问题所基于的JavaScript),但希望对某些人有用。

我们内部的应用程序有一个网页,用户可以在其中创建指向遍布我们网络的有用文件的快捷方式列表。 当他们单击这些快捷方式之一时,我们想打开这些文件...但是,当然,Chrome的错误阻止了此操作。

enter image description here

该网页使用AngularJS 1.x列出了各种快捷方式。

最初,我的网页试图直接创建一个指向文件的<a href..>元素,但是当用户单击这些链接之一时,这会产生“ C:\002.jpg”错误。

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

解决方案是用此代码替换那些C:\002.jpg元素,以在我的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项目中,我添加了一个名为C:\002.jpg的处理程序文件,其中包含以下代码:

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

就是这样。

现在,当用户单击我的快捷方式链接之一时,它将调用C:\002.jpg函数,该函数将打开此.ashx文件,并向其传递我们要打开的文件的路径+文件名。

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

并且,完成工作后,该网页将打开外部文件。

ew! 再一次-Chrome抛出此“ C:\002.jpg”异常是有原因的,因此请谨慎行事...但是我发布此代码只是为了证明这是解决此限制的一种非常简单的方法。

最后一个评论:最初的问题是要打开文件“ C:\002.jpg”。 你做不到 您的网站将位于一台服务器上(具有自己的C:驱动器),并且不能直接访问用户自己的C:驱动器。 因此,您能做的最好的事情就是使用像我的代码来访问网络驱动器上某处的文件。

Mike Gledhill answered 2019-10-09T02:31:03Z
12 votes

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

这是一篇文章,旨在解决Chrome中的标志(并向系统开放漏洞):

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

Scott answered 2019-10-09T02:31:35Z
4 votes

有使用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 Header选项,以防万一遇到任何跨源访问错误。

Shwetabh Shekhar answered 2019-10-09T02:32:06Z
4 votes

1)打开您的终端并输入

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

2)转到要为其提供文件的根文件夹,然后键入:

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

3)读取终端的输出,将会出现一些background: url('http://localhost:8080/waw.png')

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

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

Marcelo Rafael answered 2019-10-09T02:34:00Z
3 votes

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

但是,如果要将文件放置在项目的根文件夹中(例如myProject\Content\),并像这样引用它:

<img src="/Content/myfolder/myimage.jpg" />
Liam Appleyard answered 2019-10-09T02:34:35Z
1 votes

如果您可以这样做,那么它将代表一个严重的安全问题,因为您可以访问文件系统,并可能对该文件中的可用数据进行操作...幸运的是,您无法做您想做的事情。

如果需要访问本地资源,则可以尝试在计算机上启动Web服务器,在这种情况下,您的方法将起作用。 其他解决方法也是可行的,例如根据Chrome设置进行操作,但我总是更喜欢干净的方法,可以在其他端口上安装本地Web服务器(不,这并不难!)。

也可以看看:

  • 使用Chrome打开本地文件([file://)]
  • 从Chrome打开本地文件
Prak answered 2019-10-09T02:35:10Z
1 votes

当我使用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);

我认为可能会给某人一个想法,让他围绕自己创作

谢谢

Ruberandinda Patience answered 2019-10-09T02:35:39Z
translate from https://stackoverflow.com:/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource