测试浏览器： 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/
请给我任何合适的建议。
【问题讨论】：
<input type=file> 访问本地资源
标签： javascript google-chrome window.open
我们在课堂上经常使用 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 项目中，我添加了一个名为 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 的解决方法。
步骤如下：
现在轻松访问您的本地文件：
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 选项，以防遇到任何跨源访问错误。
【讨论】：
您将无法在项目目录之外或从用户级目录加载图像，因此会出现“无法访问本地资源警告”。
但是，如果您要将文件放在项目的根文件夹中，例如 {rootFolder}\Content\my-image.jpg，并像这样引用它：
<img src="/Content/my-image.jpg" />
【讨论】：
当我使用 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);
我认为可能会给某人一些想法来创建自己的作品
谢谢
【讨论】：
出于安全考虑，Google Chrome 不允许加载本地资源。 Chrome 需要 http 网址。 Internet Explorer 和 Edge 允许加载本地资源，但 Safari、Chrome 和 Firefox 不允许加载本地资源。
转到文件位置并从那里启动 Python 服务器。
python -m SimpleHttpServer
然后将该网址放入函数中：
function run(){
var URL = "http://172.271.1.20:8000/" /* http://0.0.0.0:8000/ or http://127.0.0.1:8000/; */
window.open(URL, null);
}
【讨论】：
python -m http.server。
如果你能做到这一点，这将代表一个大的安全问题，因为你可以访问你的文件系统，并可能对那里的可用数据采取行动......幸运的是，你无法做到你想做的事情。
如果您需要访问本地资源，您可以尝试在您的机器上启动一个 Web 服务器，在这种情况下您的方法将起作用。其他解决方法是可能的，例如对 Chrome 设置进行操作，但我总是更喜欢干净的方式，安装本地 Web 服务器，可能在不同的端口上（不，这并不难！）。
另见：
【讨论】：
如果您安装了 php - 您可以使用内置服务器。只需打开带有文件的目标目录并运行
php -S localhost:8001
【讨论】：
您只需将所有图像网络路径替换为存储的编码 HTML 字符串中的字节字符串。 为此，您需要 HtmlAgilityPack 将 Html 字符串转换为 Html 文档。 https://www.nuget.org/packages/HtmlAgilityPack
在下面找到将每个图像 src 网络路径（或本地路径）转换为字节字符串的代码。 它肯定会在IE、chrome和firefox中显示所有带有网络路径（或本地路径）的图像。
string encodedHtmlString = Emailmodel.DtEmailFields.Rows[0]["Body"].ToString();
// Decode the encoded string.
StringWriter myWriter = new StringWriter();
HttpUtility.HtmlDecode(encodedHtmlString, myWriter);
string DecodedHtmlString = myWriter.ToString();
//find and replace each img src with byte string
HtmlDocument document = new HtmlDocument();
document.LoadHtml(DecodedHtmlString);
document.DocumentNode.Descendants("img")
.Where(e =>
{
string src = e.GetAttributeValue("src", null) ?? "";
return !string.IsNullOrEmpty(src);//&& src.StartsWith("data:image");
})
.ToList()
.ForEach(x =>
{
string currentSrcValue = x.GetAttributeValue("src", null);
string filePath = Path.GetDirectoryName(currentSrcValue) + "\\";
string filename = Path.GetFileName(currentSrcValue);
string contenttype = "image/" + Path.GetExtension(filename).Replace(".", "");
FileStream fs = new FileStream(filePath + filename, FileMode.Open, FileAccess.Read);
BinaryReader br = new BinaryReader(fs);
Byte[] bytes = br.ReadBytes((Int32)fs.Length);
br.Close();
fs.Close();
x.SetAttributeValue("src", "data:" + contenttype + ";base64," + Convert.ToBase64String(bytes));
});
string result = document.DocumentNode.OuterHtml;
//Encode HTML string
string myEncodedString = HttpUtility.HtmlEncode(result);
Emailmodel.DtEmailFields.Rows[0]["Body"] = myEncodedString;
【讨论】：
出于安全原因，Chrome 和其他浏览器会限制服务器对本地文件的访问。但是，您可以在允许的访问模式下打开浏览器。只需打开终端，进入 chrome.exe 所在的文件夹，编写以下命令即可。
chrome.exe --allow-file-access-from-files
但是，这种方式对我不起作用，因此我为特定目录中的每个文件创建了不同的路径。因此，转到该路径意味着打开该文件。
function getroutes(list){
list.forEach(function(element) {
app.get("/"+ element, function(req, res) {
res.sendFile(__dirname + "/public/extracted/" + element);
});
});
}
我调用了这个函数，传递了目录__dirname/public/extracted 中的文件名列表，它为我能够在服务器端呈现的每个文件名创建了不同的路由。
【讨论】：
这个解决方案在 PHP 中对我有用。它会在浏览器中打开 PDF。
// $path is the path to the pdf file
public function showPDF($path) {
if($path) {
header("Content-type: application/pdf");
header("Content-Disposition: inline; filename=filename.pdf");
@readfile($path);
}
}
【讨论】：
我遇到了这个问题，这是我的 Angular 解决方案，我将 Angular 的资产文件夹包装在 encodeURIComponent() 函数中。有效。但是，如果有的话，我想更多地了解这个解决方案的风险：
```const URL = ${encodeURIComponent(/assets/office/file_2.pdf)}
window.open(网址)
I used Angular 9, so this is my url when I clicked open local file:
```http://localhost:4200/%2Fassets%2Foffice%2Ffile_2.pdf```
【讨论】：
在音频文件的情况下，当您提供<audio src="C://somePath"/> 时，这会引发错误提示cannot load local resource.
这是有道理的，因为任何网页都不能简单地提供本地路径并访问您的私人文件。
如果您尝试使用动态路径播放音频，通过 JS 更改 src property，那么这里是使用 Flask 服务器和 HTML 的示例实现。
server.py
@app.route("/")
def home():
return render_template('audioMap.html')
@app.route('/<audio_file_name>')
def view_method(audio_file_name):
path_to_audio_file = "C:/Audios/yourFolderPath" + audio_file_name
return send_file(
path_to_audio_file,
mimetype="audio/mp3",
as_attachment=True,
attachment_filename="test.mp3")
audioMap.html
{% raw %}
<!DOCTYPE html>
<html>
<body>
AUDIO: <audio src="Std.mp3" controls >
</body>
</html>
{% endraw %}
解释：
当您在src 属性下提供音频文件名时，这会在烧瓶中创建一个获取请求，如图所示
127.0.0.1 - - [04/May/2021 21:33:12] "GET /Std.mp3 HTTP/1.1" 200 -
如您所见，flask 已经发送了对Std.mp3 文件的Get 请求。因此，为了服务这个 get 请求，我们编写了一个端点，它获取音频文件名，从本地目录中读取它，然后返回它。因此音频会显示在 UI 上。
注意：这仅在您使用 通过烧瓶渲染模板方法，或者说，使用烧瓶作为您的网络服务器。
【讨论】：
const url = "file:///C:\002.jpg"
chrome.tabs.create({url, active:true})
{
"name": "",
"manifest_version": 3,
"permissions": [
"activeTab",
"tabs"
],
// ...
}
【讨论】：