测试浏览器：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/
请给我任何合适的建议。
无法打开本地文件 - Chrome：不允许加载本地资源
IT技术
javascript
google-chrome
window.open
2021-01-11 13:23:01
6个回答
我们在课堂上经常使用 Chrome，因此必须处理本地文件。
我们一直在使用的是“Web Server for Chrome”。您启动它，选择希望使用的文件夹并转到 URL（例如您选择的 127.0.0.1:port）
它是一个简单的服务器，不能使用 PHP，但对于简单的工作，可能是您的解决方案：
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
1）打开你的终端并输入
npm install -g http-server
2）转到您要为您提供文件的根文件夹并键入：
http-server ./
3）阅读终端的输出，http://localhost:8080会出现一些东西。
那里的一切都将被允许获得。例子：
background: url('http://localhost:8080/waw.png');
好的，伙计们，我完全理解此错误消息背后的安全原因，但有时，我们确实需要一种解决方法......这是我的。它使用 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 文件，并将我们要打开的文件的路径+文件名传递给它。
此处理程序代码加载文件，然后在 HTTP 响应中将其内容传回。
并且，工作完成，网页打开外部文件。
呼！同样 - Chrome 抛出这个“ Not allowed to load local resources”异常是有原因的，所以要小心处理这个……但我发布这段代码只是为了证明这是绕过这个限制的一种相当简单的方法。
最后一个评论：原来的问题是想打开文件“ C:\002.jpg”。你不能这样做。您的网站将位于一台服务器上（使用它自己的 C: 驱动器）并且无法直接访问您用户自己的 C: 驱动器。所以你能做的最好的事情就是使用像我这样的代码来访问网络驱动器上某处的文件。
出于安全原因，Chrome 专门以这种方式阻止本地文件访问。
这是一篇解决 Chrome 中的标志的文章（并打开您的系统以应对漏洞）：
有一个使用Web Server for Chrome的解决方法。
以下是步骤：
- 将扩展添加到 chrome。
- 选择文件夹(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 选项，以防您遇到任何跨源访问错误。