Browser testen:
Versie van Chrome: 52.0.2743.116
Het is een eenvoudig javascript om een afbeeldingsbestand van een lokale locatie te openen, zoals ‘C:\002.jpg’
function run(){
var URL = "file:///C:\002.jpg";
window.open(URL, null);
}
run();
Hier is mijn voorbeeldcode.
https://fiddle.jshell.net/q326vLya/3/
Geef me alle geschikte suggesties.
Antwoord 1, autoriteit 100%
Weet dat dit een beetje oud is, maar zie veel van dit soort vragen…
We gebruiken Chrome veel in de klas en het is een must om met lokale bestanden te werken.
Wat we hebben gebruikt, is ‘Webserver voor Chrome’. Je start het op, kiest de map waarmee je wilt werken en gaat naar URL (zoals 127.0.0.1:poort die je hebt gekozen)
Het is een eenvoudige server en kan geen PHP gebruiken, maar voor eenvoudig werk is dit misschien uw oplossing:
https://chrome.google.com/webstore/ detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb
Antwoord 2, autoriteit 31%
1)
Open je terminal en typ
npm install -g http-server
2)
Ga naar de hoofdmap die je bestanden wilt laten zien en typ:
http-server ./
3)
Lees de uitvoer van de terminal, er zal iets soort http://localhost:8080verschijnen.
Alles wat daar staat, mag gehaald worden.
Voorbeeld:
background: url('https://localhost:8080/waw.png');
Antwoord 3, autoriteit 28%
Oké mensen, ik begrijp de veiligheidsredenen achter deze foutmelding volledig, maar soms hebben we een tijdelijke oplossing nodig… en hier is de mijne. Het gebruikt ASP.Net (in plaats van JavaScript, waarop deze vraag was gebaseerd), maar het zal hopelijk nuttig zijn voor iemand.
Onze interne app heeft een webpagina waar gebruikers een lijst met snelkoppelingen naar nuttige bestanden kunnen maken die over ons netwerk zijn verspreid. Wanneer ze op een van deze snelkoppelingen klikken, willen we deze bestanden openen… maar de fout van Chrome verhindert dit natuurlijk.
Deze webpagina gebruikt AngularJS 1.x om de verschillende sneltoetsen weer te geven.
Oorspronkelijk probeerde mijn webpagina rechtstreeks een <a href..>-element te maken dat naar de bestanden wees, maar dit leverde de melding “Not allowed to load local resource” fout wanneer een gebruiker op een van deze links heeft geklikt.
<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>
De oplossing was om die <a href..>elementen te vervangen door deze code, om een functie aan te roepen in mijn Angular-controller…
<div ng-click="OpenAnExternalFile(sc.ShtCut_PathFilename);" >
{{ sc.ShtCut_Name }}
</div>
De functie zelf is heel eenvoudig …
$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);
}
En in mijn ASP.NET-project voegde ik een handlerbestand aan de naam DownloadExternalFile.aspxdie deze code bevatte:
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;
}
}
}
En dat is het.
Als een gebruiker nu op een van mijn snelkoppelingen klikt, roept hij de functie OpenAnExternalFileaan, die dit .ashx-bestand opent en het pad+bestandsnaam doorgeeft van het bestand dat we willen openen.
Deze Handler-code laadt het bestand en geeft de inhoud vervolgens terug in het HTTP-antwoord.
En klaar, de webpagina opent het externe bestand.
Pfoe! Nogmaals – er is een reden waarom Chrome deze uitzondering ‘Not allowed to load local resources‘ gooit, dus ga hier voorzichtig mee om… maar ik plaats deze code alleen om aan te tonen dat dit een redelijk eenvoudige manier om deze beperking te omzeilen.
Nog een laatste opmerking: de oorspronkelijke vraag wilde het bestand “C:\002.jpg” openen. Je kunt nietdit doen. Uw website staat op één server (met zijn eigen C:-schijf) en heeft geen directe toegang tot de eigen C:-schijf van uw gebruiker. Je kunt dus het beste code zoals de mijne gebruiken om ergens op een netwerkschijf toegang te krijgen tot bestanden.
Antwoord 4, autoriteit 22%
Chrome blokkeert op deze manier specifiek lokale bestandstoegang om veiligheidsredenen.
Hier is een artikel om de vlag in Chrome te omzeilen (en uw systeem open te stellen voor kwetsbaarheden):
http://www.chrome-allow-file-access- from-file.com/
Antwoord 5, autoriteit 13%
Er is een tijdelijke oplossing met behulp van webserver voor Chrome.
Dit zijn de stappen:
- Voeg de extensie toe aan chrome.
- Kies de map (C:\images)en start de server
op uw gewenste poort.
Nu eenvoudig toegang tot uw lokale bestand:
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: Mogelijk moet u de CORS Header-optie selecteren in de geavanceerde instelling voor het geval u te maken krijgt met een cross-origin-toegangsfout.
Antwoord 6, autoriteit 8%
Dit probleem treedt op wanneer ik PHP als server-side taal gebruik en de oplossing was om base64-codering van mijn afbeelding te genereren voordat ik het resultaat naar de client stuur
$path = 'E:/pat/rwanda.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);
Ik denk dat het iemand een idee kan geven om zijn eigen werk rond te maken
Bedankt
Antwoord 7, autoriteit 7%
U kunt geen afbeelding laden buiten de projectmap of vanuit een map op gebruikersniveau, vandaar de “geen toegang tot lokale bronwaarschuwing”.
Maar als u het bestand in een hoofdmap van uw project zou plaatsen zoals in {rootFolder}\Content\my-image.jpgen er zo naar zou verwijzen:
<img src="/Content/my-image.jpg" />
Antwoord 8, autoriteit 4%
Google Chrome staat het laden van lokale bronnen niet toe vanwege de beveiliging. Chrome heeft een http-url nodig. Internet Explorer en Edge laten toe om lokale bronnen te laden, maar Safari, Chrome en Firefox staan niet toe om lokale bronnen te laden.
Ga naar de bestandslocatie en start de Python Server vanaf daar.
python -m SimpleHttpServer
zet die url dan in functie:
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);
}
Antwoord 9, autoriteit 2%
Als je dit zou kunnen doen, zal dit een groot beveiligingsprobleem vormen, omdat je toegang hebt tot je bestandssysteem en mogelijk actie kunt ondernemen op de daar beschikbare gegevens… Gelukkig is het niet mogelijk om te doen wat je probeert te doen.
Als u toegang nodig heeft tot lokale bronnen, kunt u proberen een webserver op uw computer te starten, en in dit geval zal uw methode werken. Andere tijdelijke oplossingen zijn mogelijk, zoals handelen op Chrome-instellingen, maar ik geef altijd de voorkeur aan de schone manier, een lokale webserver installeren, misschien op een andere poort (nee, het is niet zo moeilijk!).
Zie ook:
Antwoord 10, autoriteit 2%
Als je php hebt geïnstalleerd, kun je de ingebouwde server gebruiken. Open gewoon de doelmap met bestanden en voer
. uit
php -S localhost:8001
Antwoord 11
Je hoeft alleen maar alle afbeeldingsnetwerkpaden te vervangen door bytetekenreeksen in opgeslagen gecodeerde HTML-tekenreeksen.
Hiervoor had je HtmlAgilityPack nodig om Html-string naar Html-document te converteren.
https://www.nuget.org/packages/HtmlAgilityPack
Zoek onderstaande code om elke afbeelding src-netwerkpad (of lokaal pad) naar byte sting te converteren.
Het zal zeker alle afbeeldingen met netwerkpad (of lokaal pad) weergeven in IE, Chrome en 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;
Antwoord 12
Chrome en andere browser beperken de toegang van een server naar lokale bestanden vanwege veiligheidsredenen. U kunt echter de browser openen in de toegestane toegangsmodus. Open gewoon de terminal en ga naar de map waar chrome.exe wordt opgeslagen en de volgende opdracht schrijven.
chrome.exe --allow-file-access-from-files
Op deze manier werkte echter niet voor mij, dus ik heb een andere route voor elk bestand in een bepaalde map gemaakt. Daarom betekende het gaan naar dat pad dat het openen van dat bestand.
function getroutes(list){
list.forEach(function(element) {
app.get("/"+ element, function(req, res) {
res.sendFile(__dirname + "/public/extracted/" + element);
});
});
}
Ik heb deze functie gebeld die de lijst met bestandsnaam in de directory is doorgegeven __dirname/public/extracteden het creëerde een andere route voor elke bestandsnaam die ik in staat was om op de serverzijde.
Antwoord 13
Deze oplossing werkte voor mij in PHP. Het opent de PDF in de browser.
// $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);
}
}
Antwoord 14
Ik heb dit probleem encounterd, en hier is mijn oplossing voor Angular, ik sloeg mijn itemmap Angular in encodeURIComponent () functie. Het werkte. Maar toch, ik wil graag meer weten over de risico’s van deze oplossing als er een:
“ `const URL = ${encodeURIComponent(/assets/office/file_2.pdf )}
window.open (URL)
I used Angular 9, so this is my url when I clicked open local file:
```http://localhost:4200/%2Fassets%2Foffice%2Ffile_2.pdf```
Antwoord 15
In het geval van audio-bestanden, wanneer je give <audio src="C://somePath"/>, werpt dit een fout zeggend cannot load local resource.
Dat is logisch, want een webpagina niet alleen een lokale pad en de toegang kan geven uw privé-bestanden.
In het geval dat u probeert audio met dynamische paden om te spelen, door het veranderen van src propertydoor de JS, dan is hier een voorbeeld implementatie met behulp van Kolf server en 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 %}
Uitleg:
Wanneer u de AUDIO-bestandsnaam geeft onder srconroerend goed, maakt dit een ontvangen verzoek in de kolf zoals afgebeeld
127.0.0.1 - - [04/May/2021 21:33:12] "GET /Std.mp3 HTTP/1.1" 200 -
Zoals u kunt zien, heeft de kolf een ontvangen aanvraag verzonden voor de Std.mp3-bestand. Dus om dit ontvangen verzoek te dienen, schreven we een eindpunt dat de naam van het audiobestand aanneemt, leest het uit de lokale map en keert het terug. Daarom verschijnt de audio op UI.
Opmerking: dit werkt alleen als u uw HTML-bestand weergeeft met behulp van de
Render_template-methode via een kolf of om te zeggen, het gebruik van een kolf als uw webserver.
Antwoord 16
Dit is voor Google-chrome-extensie
const url = "file:///C:\002.jpg"
chrome.tabs.create({url, active:true})
{
"name": "",
"manifest_version": 3,
"permissions": [
"activeTab",
"tabs"
],
// ...
}