Проверочный браузер: Версия 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 в классе, и это необходимо для работы с локальными файлами.
То, что мы использовали, - "Веб-сервер для Chrome". Вы запустите его, выберите папку, желающую работать, и перейдите к URL (например, 127.0.0.1:port, который вы выбрали)
Это простой сервер и не может использовать PHP, но для простой работы может быть вашим решением:
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
Ладно, ребята, я полностью понимаю причины безопасности, стоящие за этим сообщением об ошибке, но иногда нам нужен обходной путь... и здесь мой. Он использует 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 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 (и откройте вашу систему до уязвимостей):
Существует обходной путь с использованием веб-сервера для 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 в дополнительных настройках, если вы столкнетесь с любой ошибкой или ошибкой доступа к другому источнику.
1) Откройте свой терминал и введите
npm install -g http-server
2) Перейдите в корневую папку, в которую вы хотите предоставить файлы, и введите:
http-server./
3) Прочтите вывод терминала, что-то вроде http://localhost:8080 появится.
Все там будет разрешено получить. Пример:
background: url('http://localhost:8080/waw.png');
Вы не сможете загрузить изображение вне каталога проекта или из каталога уровня пользователя, поэтому "не удается получить доступ к предупреждению о локальных ресурсах".
Но если вы поместите файл в корневую папку вашего проекта, как в {rootFolder}\Content\my-image.jpg, и будете ссылаться на него примерно так:
<img src="/Content/my-image.jpg" />
Если бы вы могли это сделать, это будет представлять собой серьезную проблему безопасности, так как вы можете получить доступ к своей файловой системе и потенциально воздействовать на доступные там данные... К счастью, невозможно сделать то, что вы пытаетесь сделать.
Если вам нужны локальные ресурсы для доступа, вы можете попытаться запустить веб-сервер на своем компьютере, и в этом случае ваш метод будет работать. Возможны и другие обходные пути, например, действие в настройках Chrome, но я всегда предпочитаю чистый способ, устанавливая локальный веб-сервер, возможно, на другом порту (нет, это не так сложно!).
См. также:
Эта проблема возникает, когда я использую PHP в качестве языка на стороне сервера, и обходной путь заключался в том, чтобы сгенерировать end64 моего изображения base64 перед отправкой результата клиенту
$path = 'E:/pat/rwanda.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
Я думаю, может дать кому-то идею создать вокруг себя
Спасибо
Вам просто нужно заменить все пути к сетям изображений на строки байтов в сохраненной кодированной строке 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;
Google Chrome не позволяет загружать локальные ресурсы из-за безопасности. Хром нужен http URL. Internet Explorer и Edge позволяют загружать локальные ресурсы, но Safari, Chrome и Firefox не позволяют загружать локальные ресурсы.
Перейдите в папку с файлом и запустите Python Server оттуда.
python -m SimpleHttpServer
затем поместите этот URL в функцию:
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);
}
Это решение работало для меня в 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);
}
}
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, и он создал отдельный маршрут для каждого имени файла, который я смог отобразить на стороне сервера.