स्थानीय फ़ाइल नहीं खोल सकता - Chrome: स्थानीय संसाधन लोड करने की अनुमति नहीं है

Question

टेस्ट ब्राउज़र: क्रोम का संस्करण: 52.0.2743.116

यह एक सरल जावास्क्रिप्ट है जो 'C: \ 002.jpg' जैसी स्थानीय से एक छवि फ़ाइल खोलने के लिए है

function run(){

   var URL = "file:///C:\002.jpg";

   window.open(URL, null);

}
run();

यहाँ मेरा नमूना कोड है। https://fiddle.jshell.net/q326vLya/3/

कृपया मुझे कोई उपयुक्त सुझाव दें।

Comments

का उपयोग <input type=file>स्थानीय reources तक पहुँच प्राप्त करने

— dandavis

Answer 1

जानिए यह पुराने किस्म का है, लेकिन इस तरह के कई सवाल देखें ...

हम कक्षा में क्रोम का बहुत उपयोग करते हैं और यह स्थानीय फ़ाइलों के साथ काम करना आवश्यक है।

हम जो प्रयोग कर रहे हैं वह "क्रोम के लिए वेब सर्वर" है। आप इसे शुरू करते हैं, उस फ़ोल्डर के साथ काम करने की इच्छा चुनें और URL पर जाएं (जैसे 127.0.0.1:पोर्ट आपने चुना)

यह एक सरल सर्वर है और PHP का उपयोग नहीं कर सकता है लेकिन सरल काम के लिए, आपका समाधान हो सकता है:

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

Comments

वुडी: बहुत बहुत धन्यवाद! इस दृष्टिकोण ने मेरी मदद की। मैं विंडोज 10 पर एक स्थानीय टॉस्कैट + एक स्थानीय एडब्ल्यूएस एस 3 बाल्टी चलाता हूं। अब मैं लाइव एडब्ल्यूएस सर्वर और एक स्थानीय एक के बीच स्विच कर सकता हूं। चीयर्स। Q

— user1723453 15

Answer 2

ठीक है दोस्तों, मैं पूरी तरह से इस त्रुटि संदेश के पीछे सुरक्षा कारणों को समझता हूं, लेकिन कभी-कभी, हमें वर्कअराउंड की आवश्यकता होती है ... और यहां मेरा है। यह ASP.Net का उपयोग करता है (जावास्क्रिप्ट के बजाय, जो यह प्रश्न आधारित था) लेकिन यह उम्मीद है कि किसी के लिए उपयोगी होगा।

हमारे इन-हाउस ऐप में एक वेबपेज है जहां उपयोगकर्ता हमारे पूरे नेटवर्क में फैली उपयोगी फाइलों के शॉर्टकट की सूची बना सकते हैं। जब वे इनमें से किसी एक शॉर्टकट पर क्लिक करते हैं, तो हम इन फ़ाइलों को खोलना चाहते हैं ... लेकिन निश्चित रूप से, क्रोम की त्रुटि इसे रोकती है।

यह वेबपेज विभिन्न शॉर्टकट को सूचीबद्ध करने के लिए 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..>तत्वों को इस कोड के साथ बदलने के लिए था , जो मेरे कोणीय नियंत्रक में एक फ़ंक्शन को कॉल करने के लिए ...

<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 प्रतिसाद में वापस भेज देता है।

और, काम किया, वेबपेज बाहरी फाइल को खोलता है।

काहे! फिर से - एक कारण है कि क्रोम इस Not allowed to load local resourcesअपवाद को फेंकता है, इसलिए इसके साथ सावधानी से चलें ... लेकिन मैं इस कोड को सिर्फ यह प्रदर्शित करने के लिए पोस्ट कर रहा हूं कि यह इस सीमा के आसपास काफी सरल तरीका है।

सिर्फ एक आखिरी टिप्पणी: मूल प्रश्न " C:\002.jpg" फाइल को खोलना चाहता था । आप ऐसा नहीं कर सकते । आपकी वेबसाइट एक सर्वर पर बैठेगी (यह स्वयं C: ड्राइव है) और आपके उपयोगकर्ता की C: ड्राइव पर कोई सीधी पहुँच नहीं है। तो आप जो सबसे अच्छा कर सकते हैं वह नेटवर्क ड्राइव पर फ़ाइलों को एक्सेस करने के लिए खान की तरह कोड का उपयोग करना है।

Comments

अच्छा लगता है, लेकिन आप प्राधिकरण (अनुमतियाँ पढ़ें) को कैसे संभालते हैं? क्या होगा यदि सभी उपयोगकर्ताओं को किसी दिए गए फ़ाइल को देखने की अनुमति नहीं है? क्या आपको अनुरोध करने वाले उपयोगकर्ता के नाम पर रीड करने की आवश्यकता नहीं है?

— तिमि

आप एक स्थानीय फ़ाइल खोलने के लिए वेबक्लिप का उपयोग क्यों करते हैं? और मेरे लिए, यह C: \ SomeNetworkPath \ ... खोलने की कोशिश करता है ...

— केव

अगर हम कोणीय का उपयोग नहीं कर रहे हैं तो क्या यह अभी भी संभव है?

— अहमद .r।

यह एक उपयोगी उत्तर था, लेकिन वेब पेज के लोड समय पर यह बहुत प्रभाव डालता है यदि आपके पास इस राख के हैंडल के माध्यम से सैकड़ों तस्वीरें हैं और इस तरह डाउनलोड की जा रही हैं।

— जमशेद कामरान

Answer 3

Chrome विशेष रूप से सुरक्षा कारणों से स्थानीय फ़ाइल एक्सेस को ब्लॉक करता है।

क्रोम में ध्वज को सक्षम करने के लिए यहां एक समाधान है (और अपने सिस्टम को कमजोरियों तक खोलें):

c: \ Program Files (x86) \ google \ chrome \ Application \ chrome.exe --allow-file-access-from-files

Comments

मैंने "c: \ path \ chrome.exe" -allow-file-access-from-files समाधान का पालन करने की कोशिश की, लेकिन मैं इसे नहीं खोल सकता। कृपया इस वेबसाइट fiddle.jshell.net/q326vLya/3 का परीक्षण करें । मैं क्या गलत कर रहा हूं?

— KBH

GoogleChrome 66 पर इसका काम नहीं कर रहा है। क्रोम उस झंडे के साथ शुरू होता है, लेकिन यह अभी भी दिखाता है कि स्थानीय फ़ाइल कैनब को खोला जा सकता है।

— Radon8472

Answer 4

1) अपना टर्मिनल खोलें और टाइप करें

npm install -g http-server

2) उस रूट फोल्डर पर जाएं, जिसे आप फाइलें और टाइप करना चाहते हैं:

http-server ./

3) टर्मिनल का आउटपुट पढ़ें, कुछ थोड़े http://localhost:8080दिखाई देगा।

वहाँ पर सब कुछ प्राप्त करने की अनुमति दी जाएगी। उदाहरण:

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

Comments

http- सर्वर में अब एक समस्या है जिसके कारण त्रुटियां हैं - आप इसे ठीक करने के लिए 0.9 तक डाउनग्रेड कर सकते हैं - देखें stackoverflow.com/questions/56364464/…

— ब्रायन बर्न्स

यह मेरे लिए सबसे सरल उत्तर था। 100% काम किया। धन्यवाद!

— रॉबर्ड कॉर्ड

Answer 5

Chrome के लिए वेब सर्वर का उपयोग करके एक वर्कअराउंड है ।
यहाँ कदम हैं:

1. क्रोम में एक्सटेंशन जोड़ें।
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();

पुनश्च: आपको किसी भी क्रॉस ओरिजनल एक्सेस एरर का सामना करने वाले उन्नत सेटिंग से कोर्स हैडर विकल्प का चयन करने की आवश्यकता हो सकती है।

Answer 6

आप परियोजना निर्देशिका के बाहर या उपयोगकर्ता स्तर की निर्देशिका से छवि लोड नहीं कर पाएंगे, इसलिए "स्थानीय संसाधन चेतावनी तक नहीं पहुंच सकते"।

लेकिन अगर आप फ़ाइल को अपने प्रोजेक्ट के रूट फ़ोल्डर में रखना चाहते हैं जैसे कि {rootFolder}\Content\my-image.jpgऔर इसे इस तरह संदर्भित करें:

<img src="/Content/my-image.jpg" />

Answer 7

यह समस्या तब आती है जब मैं PHP को सर्वर साइड भाषा के रूप में उपयोग कर रहा हूं और क्लाइंट के लिए परिणाम भेजने से पहले मेरी छवि का आधार 64 उत्पन्न करना था

$path = 'E:/pat/rwanda.png';
$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

मुझे लगता है कि किसी व्यक्ति को अपना काम बनाने के लिए विचार करना चाहिए

धन्यवाद

Answer 8

Google Chrome सुरक्षा के कारण स्थानीय संसाधनों को लोड करने की अनुमति नहीं देता है। Chrome को http url की आवश्यकता है। इंटरनेट एक्सप्लोरर और एज स्थानीय संसाधनों को लोड करने की अनुमति देता है, लेकिन सफारी, क्रोम और फ़ायरफ़ॉक्स स्थानीय संसाधनों को लोड करने की अनुमति नहीं देता है।

फाइल लोकेशन पर जाएं और वहां से पायथन सर्वर शुरू करें।

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

Answer 9

यदि आपके पास php स्थापित है - आप अंतर्निहित सर्वर का उपयोग कर सकते हैं। बस फ़ाइलों और चलाने के साथ लक्ष्य dir खोलें

php -S localhost:8001

Answer 10

यदि आप ऐसा कर सकते हैं, तो यह एक बड़ी सुरक्षा समस्या का प्रतिनिधित्व करेगा, जैसा कि आप अपने फाइल सिस्टम तक पहुंच सकते हैं, और वहां उपलब्ध डेटा पर संभावित रूप से कार्य कर सकते हैं ... सौभाग्य से यह करना संभव नहीं है कि आप क्या करने की कोशिश कर रहे हैं।

यदि आपको एक्सेस करने के लिए स्थानीय संसाधनों की आवश्यकता है, तो आप अपनी मशीन पर एक वेब सर्वर शुरू करने का प्रयास कर सकते हैं और इस मामले में आपका तरीका काम करेगा। अन्य वर्कअराउड्स संभव हैं, जैसे कि क्रोम सेटिंग्स पर अभिनय करना, लेकिन मैं हमेशा साफ तरीका पसंद करता हूं, स्थानीय वेब सर्वर को स्थापित करना, शायद एक अलग पोर्ट पर (नहीं, यह इतना मुश्किल नहीं है!)।

यह सभी देखें:

• Chrome का उपयोग करके स्थानीय फ़ाइलें (फ़ाइल: //) खोलें
• क्रोम से स्थानीय फ़ाइलें खोलना

Comments

नियम का कारण तकनीकी से अधिक सामाजिक है; ब्राउज़र पहले से ही ऑफ-डोमेन संसाधनों के लिए प्रोग्रामेटिक एक्सेस को रोकने का एक अच्छा काम करते हैं (जैसे। एसओपी, सीडीएन स्क्रिप्ट, डीप-लिंक्ड आईएमजी टैग इत्यादि), लेकिन यह ब्राउज़र विंडो में अपने स्थानीय कंटेंट को देखने के लिए लोगों की मदद करता है, भले ही वह एक विंडो में हो स्क्रिप्ट बता नहीं सकती कि यह क्या दिखा रहा है ...

— dandavis

@ डांडवीस हाँ, आप सही हैं, फिर भी मेरा मानना ​​है कि ऐसा होने से रोकने के लिए यह अच्छा हो सकता है। कुछ कार्यान्वयन में बग्स के अलावा (यदि आप स्थानीय संसाधन नहीं खोल सकते हैं, तो आप शायद अधिक सुरक्षित हैं), कुछ विशिष्ट परिदृश्य हो सकते हैं जहां अन्य लोग आपकी स्क्रीन (स्क्रीन साझा करने वाले ऐप्स, या बस आपके कार्यालय में आपकी पीठ के पीछे देख रहे हों) ) और आप नहीं चाहते हैं कि आपकी छवियां (संभावित रूप से एक क्रेडिट कार्ड या एक निजी छवि) केवल कुछ वेबसाइटों पर जाकर खोली जा सकती हैं जो आपके स्थानीय फाइल सिस्टम पर स्थान का अनुमान लगा सकती हैं ...

— प्रका

Answer 11

आपको बस संग्रहीत एन्कोडेड HTML स्ट्रिंग में बाइट स्ट्रिंग्स को सभी छवि नेटवर्क पथों को बदलने की आवश्यकता है। इसके लिए आपको एचटीएमएल स्ट्रिंग को एचटीएमएल डॉक्यूमेंट में बदलने के लिए एचटीएमएलजीबिलिटीपैक की आवश्यकता थी। https://www.nuget.org/packages/HtmlAgilityPack

प्रत्येक छवि src नेटवर्क पथ (या स्थानीय पथ) को बाइट स्टिंग में परिवर्तित करने के लिए नीचे कोड खोजें। यह निश्चित रूप से IE, क्रोम और फ़ायरफ़ॉक्स में नेटवर्क पथ (या स्थानीय पथ) के साथ सभी छवियों को प्रदर्शित करेगा।

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;

Answer 12

इस समाधान ने मेरे लिए PHP में काम किया। यह ब्राउज़र में पीडीएफ खोलता है।

// $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);
    }
}

Answer 13

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और इसने प्रत्येक फ़ाइलनाम के लिए एक अलग मार्ग बनाया, जिसे मैं सर्वर साइड पर प्रस्तुत करने में सक्षम था।

Answer 14

मैंने इस समस्या का सामना किया है, और यहाँ पर मेरा समाधान एंगुलर के लिए है, मैंने अपने एंगुलर के एसेट फोल्डर को एन्कोड्यूरिकम्पोनेंट () फ़ंक्शन में लपेटा। इसने काम कर दिया। लेकिन फिर भी, मैं इस समाधान के जोखिम के बारे में अधिक जानना चाहता हूं यदि कोई हो:

`` ` ${encodeURIComponent(कास्ट URL = /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```