স্থানীয় ফাইল খুলতে পারে না - ক্রোম: স্থানীয় সংস্থান লোড করার অনুমতি নেই

Question 1

পরীক্ষামূলক ব্রাউজার: ক্রোমের সংস্করণ: 52.0.2743.116

এটি একটি সরল জাভাস্ক্রিপ্ট যা স্থানীয় থেকে 'সি:। 002.jpg' এর মতো একটি চিত্র ফাইল খুলতে পারে is

function run(){

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

   window.open(URL, null);

}
run();

এখানে আমার নমুনা কোড। https://fiddle.jshell.net/q326vLya/3/

আমাকে কোন উপযুক্ত পরামর্শ দিন।

Question 2

জানুন এটি একপ্রকার পুরানো, তবে এরকম অনেক প্রশ্ন দেখুন ...

আমরা ক্লাসে ক্রোমটি প্রচুর ব্যবহার করি এবং স্থানীয় ফাইলগুলির সাথে এটি কাজ করা আবশ্যক।

আমরা যা ব্যবহার করছি তা হ'ল "ক্রোমের জন্য ওয়েব সার্ভার"। আপনি এটি শুরু করে, কাজ করতে ইচ্ছুক ফোল্ডারটি চয়ন করুন এবং ইউআরএল এ যান (যেমন 127.0.0.1: আপনি পছন্দ করেছেন এমন পোর্ট)

এটি একটি সাধারণ সার্ভার এবং পিএইচপি ব্যবহার করতে পারে না তবে সাধারণ কাজের জন্য, আপনার সমাধান হতে পারে:

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

Question 3

ঠিক আছে লোকেরা, আমি এই ত্রুটি বার্তার পিছনে সুরক্ষা কারণগুলি পুরোপুরি বুঝতে পেরেছি, তবে কখনও কখনও আমাদের প্রয়োজন হয় না ... এবং এখানে আমার। এটি এএসপি.নেট ব্যবহার করে (জাভাস্ক্রিপ্টের চেয়ে এই প্রশ্নটির উপর ভিত্তি করে) তবে আশা করি এটি কারও পক্ষে কার্যকর হবে to

আমাদের ইন-হাউস অ্যাপ্লিকেশনটির একটি ওয়েবপৃষ্ঠা রয়েছে যেখানে ব্যবহারকারীরা আমাদের নেটওয়ার্ক জুড়ে ছড়িয়ে থাকা দরকারী ফাইলগুলির শর্টকাটের একটি তালিকা তৈরি করতে পারেন। তারা যখন এই শর্টকাটগুলির একটিতে ক্লিক করে, আমরা এই ফাইলগুলি খুলতে চাই ... তবে অবশ্যই, ক্রোমের ত্রুটি এটি এড়াতে পারে।

এই ওয়েবপৃষ্ঠায় বিভিন্ন শর্টকাটগুলি তালিকা করতে 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);
}

এবং আমার এএসপি. নেট প্রকল্পে, আমি একটি হ্যান্ডলার ফাইল যুক্ত করেছি 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" ফাইলটি খুলতে চেয়েছিল । আপনি এটি করতে পারবেন না । আপনার ওয়েবসাইটটি একটি সার্ভারে বসে থাকবে (এটি নিজস্ব সি: ড্রাইভ সহ) রয়েছে এবং এতে আপনার ব্যবহারকারীর নিজস্ব সি: ড্রাইভের কোনও সরাসরি অ্যাক্সেস নেই। সুতরাং আপনি সবচেয়ে ভাল যা করতে পারেন তা হল কোনও ড্রাইভের কোথাও ফাইল অ্যাক্সেস করার জন্য আমার মতো কোড ব্যবহার।

Question 4

1) আপনার টার্মিনালটি খুলুন এবং টাইপ করুন

npm install -g http-server

2) আপনি যে ফাইলগুলি টাইপ করতে চান সেগুলির জন্য মূল ফোল্ডারে যান এবং টাইপ করুন:

http-server ./

3) টার্মিনালের আউটপুট পড়ুন, কিছু কিন্ডা http://localhost:8080আসবে।

ওখানে থাকা সমস্ত কিছু পেতে দেওয়া হবে। উদাহরণ:

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

Question 5

সুরক্ষার কারণে ক্রোম এইভাবে স্থানীয় ফাইল অ্যাক্সেসকে অবরুদ্ধ করে।

Chrome এ পতাকা সক্ষম করার জন্য এখানে একটি কার্যকারিতা রয়েছে (এবং আপনার সিস্টেমটিকে দুর্বলতার জন্য খুলুন):

সি: \ প্রোগ্রাম ফাইল (x86) \ গুগল ক্রোম \ অ্যাপ্লিকেশন \ chrome.exe - ফাইল থেকে ফাইল-অ্যাক্সেস

Question 6

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

পিএস: আপনাকে কোনও ক্রস অরিজিন অ্যাক্সেস ত্রুটির মুখোমুখি হতে পারে তবে আপনাকে অ্যাডভান্সড সেটিং থেকে সিওআরএস শিরোলেখ বিকল্পটি নির্বাচন করতে হবে।

Question 7

আপনি প্রকল্প ডিরেক্টরি বা কোনও ব্যবহারকারী স্তর ডিরেক্টরি থেকে কোনও চিত্র লোড করতে সক্ষম হবেন না, তাই "স্থানীয় সংস্থার সতর্কতা অ্যাক্সেস করতে পারবেন না"।

তবে আপনি যদি ফাইলটিকে আপনার প্রকল্পের মূল ফোল্ডারে রাখেন {rootFolder}\Content\my-image.jpgএবং এটিকে যেমন উল্লেখ করেন:

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

Question 8

এই সমস্যাটি তখন আসে যখন আমি পিএইচপিটিকে সার্ভার সাইড ল্যাঙ্গুয়েজ হিসাবে ব্যবহার করি এবং ক্লায়েন্টকে ফলাফল প্রেরণের আগে আমার চিত্রের বেস 64 এনকন্ডিং তৈরি করা ছিল

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

আমি মনে করি কাউকে তার নিজের কাজটি তৈরি করার জন্য ধারণা দিতে পারে

ধন্যবাদ

Question 9

সুরক্ষার কারণে গুগল ক্রোম স্থানীয় সংস্থানগুলি লোড করতে দেয় না। ক্রোমের জন্য HTTP url দরকার। ইন্টারনেট এক্সপ্লোরার এবং এজ স্থানীয় সংস্থানগুলি লোড করতে দেয় তবে সাফারি, ক্রোম এবং ফায়ারফক্স স্থানীয় সংস্থানগুলি লোড করতে দেয় না।

ফাইল লোকেশনে যান এবং সেখান থেকে পাইথন সার্ভারটি শুরু করুন।

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

Question 10

যদি আপনি পিএইচপি ইনস্টল করেন - আপনি বিল্ট-ইন সার্ভারটি ব্যবহার করতে পারেন। ফাইলগুলি দিয়ে চালানোর জন্য কেবল টার্গেট দির খুলুন

php -S localhost:8001

Question 11

আপনি যদি এটি করতে পারতেন তবে এটি একটি বড় সুরক্ষা সমস্যার প্রতিনিধিত্ব করবে, যেহেতু আপনি নিজের ফাইল সিস্টেমটি অ্যাক্সেস করতে পারবেন এবং সেখানে উপলব্ধ ডেটাটিতে সম্ভাব্যভাবে কাজ করতে পারবেন ... ভাগ্যক্রমে আপনি যা করার চেষ্টা করছেন তা করা সম্ভব নয়।

অ্যাক্সেস করার জন্য আপনার যদি স্থানীয় সংস্থান দরকার হয়, আপনি নিজের মেশিনে একটি ওয়েব সার্ভার শুরু করার চেষ্টা করতে পারেন এবং এই ক্ষেত্রে আপনার পদ্ধতিটি কার্যকর হবে। অন্যান্য কাজের ক্ষেত্রগুলি যেমন ক্রোম সেটিংসে অভিনয় করা সম্ভব, তবে আমি সর্বদা পরিষ্কার উপায় পছন্দ করি, স্থানীয় ওয়েব সার্ভার ইনস্টল করি, অন্য কোনও পোর্টে সম্ভবত (না, এটি এতটা কঠিন নয়!)।

আরো দেখুন:

Question 12

সঞ্চিত এনকোডযুক্ত এইচটিএমএল স্ট্রিংয়ের বাইট স্ট্রিংয়ের জন্য আপনাকে কেবল সমস্ত চিত্র নেটওয়ার্কের পাথগুলি প্রতিস্থাপন করতে হবে। এর জন্য আপনার এইচটিএমএল দক্ষতা প্যাকের এইচটিএমএল স্ট্রিংটিকে এইচটিএমএল নথিতে রূপান্তর করতে হবে। https://www.nuget.org/packages/HtmlAgilityPack

প্রতিটি চিত্র src নেটওয়ার্ক পাথ (বা স্থানীয় পাথ) বাইট স্টিং রূপান্তর করতে কোডের নীচে সন্ধান করুন। এটি অবশ্যই আইই, ক্রোম এবং ফায়ারফক্সে নেটওয়ার্ক পাথ (বা স্থানীয় পাথ) সহ সমস্ত চিত্র প্রদর্শন করবে।

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;

Question 13

সুরক্ষার কারণে ক্রোম এবং অন্যান্য ব্রাউজার স্থানীয় ফাইলগুলিতে একটি সার্ভারের অ্যাক্সেসকে সীমাবদ্ধ করে। তবে আপনি অনুমতিপ্রাপ্ত অ্যাক্সেস মোডে ব্রাউজারটি খুলতে পারেন। কেবলমাত্র টার্মিনালটি খুলুন এবং যেখানে ফোল্ডারে 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এবং এটি প্রতিটি ফাইলের জন্য একটি পৃথক রুট তৈরি করেছে যা আমি সার্ভারের পাশে রেন্ডার করতে সক্ষম হয়েছি।

Question 14

এই সমাধানটি আমার জন্য পিএইচপি-তে কাজ করেছিল। এটি ব্রাউজারে পিডিএফ খুলবে।

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

Question 15

আমি এই সমস্যার মুখোমুখি হয়েছি, এবং এটি আমার কৌণিকের জন্য আমার সমাধান, আমি আমার কৌণিকের সম্পদ ফোল্ডারটিকে এনকোডেরিউআরকিউম্পোনেন্ট () ফাংশনে আবৃত করেছি। এটা কাজ করেছে. তবে তবুও, আমি এই সমাধানের ঝুঁকি সম্পর্কে আরও জানতে চাই যদি এখানে থাকে:

`` ` ${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```