বিভিন্ন ব্রাউজারে জাভাস্ক্রিপ্টে ক্লায়েন্ট-সাইডে ফাইলের সামগ্রীগুলি পড়া

Question

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

আমার একটি সমাধান রয়েছে যা ফায়ারফক্স এবং ইন্টারনেট এক্সপ্লোরারের সাথে কাজ করে। এটি সুন্দর নয়, তবে আমি এই মুহূর্তে কেবল জিনিসগুলি চেষ্টা করছি:

function getFileContents() {
    var fileForUpload = document.forms[0].fileForUpload;
    var fileName = fileForUpload.value;

    if (fileForUpload.files) {
        var fileContents = fileForUpload.files.item(0).getAsBinary();
        document.forms[0].fileContents.innerHTML = fileContents;
    } else {
        // try the IE method
        var fileContents = ieReadFile(fileName);
        document.forms[0].fileContents.innerHTML = fileContents;
    }
}       

function ieReadFile(filename) 
{
    try
    {
        var fso  = new ActiveXObject("Scripting.FileSystemObject"); 
        var fh = fso.OpenTextFile(filename, 1); 
        var contents = fh.ReadAll(); 
        fh.Close();
        return contents;
    }
    catch (Exception)
    {
        return "Cannot open file :(";
    }
}

আমি কল করতে পারি getFileContents()এবং এটি fileContentsপাঠ্য অঞ্চলে সামগ্রীগুলি লিখবে ।

অন্যান্য ব্রাউজারগুলিতে এটি করার কোনও উপায় আছে?

আমি এই মুহুর্তে সাফারি এবং ক্রোমের সাথে সবচেয়ে বেশি উদ্বিগ্ন তবে আমি অন্য কোনও ব্রাউজারের পরামর্শের জন্য উন্মুক্ত।

সম্পাদনা: "আপনি কেন এটি করতে চান?" প্রশ্নের উত্তরে:

মূলত, আমি ক্লায়েন্টের পাশে এক-সময় পাসওয়ার্ডের সাথে ফাইলের সামগ্রীগুলি হ্যাশ করতে চাই যাতে আমি এই তথ্যটি যাচাইকরণ হিসাবে ফেরত পাঠাতে পারি।

Comments

আমার কাছে একটি উত্তর নেই তা কেবল স্পষ্টতার জন্য, আপনার কি ফাইলটির অবস্থান জানা দরকার? যদি তা না হয় তবে ফাইলের অবস্থানটি কি কোনও ফাইল ইনপুট থেকে পড়তে হবে বা এটি কোনও পাঠ্যবক্স / টেক্সারিয়া / যা কিছু হতে পারে?

— ডার্কো জেড

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

— দামোভিসা

কেন আপনি এ কিছু করতে চান? সার্ভার এটি করতে বোঝানো হয়।

— geowa4

ঠিক আছে, সংক্ষেপে: একজন ব্যবহারকারী একটি পাসওয়ার্ড প্রবেশ করে একটি ফাইল নির্বাচন করে। পাসওয়ার্ডটি ফাইলের সামগ্রীগুলির সাথে হ্যাশ হয়ে যায় এবং এটি ফাইলের সাথে সার্ভারে প্রেরণ করা হয়। এটি সেখানে পৌঁছে গেলে, আমি যাচাই করতে পারি যে সঠিক ক্লায়েন্টের পাসওয়ার্ড ব্যবহার হয়েছিল।

— দামোভিসা

Answer 1

ফাইল এপিআই সম্পর্কে তথ্য যুক্ত করতে সম্পাদিত

যেহেতু আমি মূলত এই উত্তরটি লিখেছি তাই ফাইল এপিআই একটি মান হিসাবে প্রস্তাবিত হয়েছে এবং বেশিরভাগ ব্রাউজারগুলিতে প্রয়োগ করা হয়েছে (আইই 10 হিসাবে, যা FileReaderএখানে বর্ণিত এপিআইয়ের জন্য সমর্থন যোগ করেছে , যদিও এখনও Fileএপিআই নয়)। পুরানো মজিলা এপিআই এর চেয়ে এআইপিএল কিছুটা জটিল, কারণ এটি ফাইলগুলির অ্যাসিনক্রোনাস পাঠ, বাইনারি ফাইলগুলির জন্য আরও ভাল সমর্থন এবং বিভিন্ন পাঠ্য এনকোডিংয়ের ডিকোডিংয়ের জন্য ডিজাইন করা হয়েছে। নেই মোজিলা ডেভেলপার নেটওয়ার্কে কিছু ডকুমেন্টেশন প্রাপ্তিসাধ্য অনলাইন সেইসাথে বিভিন্ন উদাহরণ। আপনি নিম্নলিখিত হিসাবে এটি ব্যবহার করবে:

var file = document.getElementById("fileForUpload").files[0];
if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
        document.getElementById("fileContents").innerHTML = evt.target.result;
    }
    reader.onerror = function (evt) {
        document.getElementById("fileContents").innerHTML = "error reading file";
    }
}

আসল উত্তর

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

আপনি যদি এটি পরিবর্তন করতে চান তবে আপনি সর্বদা ওয়েবকিট প্রকল্পে একটি প্যাচ পাঠাতে পারেন। আর একটি সম্ভাবনা হ'ল এইচটিএমএল 5 এ অন্তর্ভুক্তির জন্য মজিলা এপিআই প্রস্তাব করা ; WHATWG মেইলিং লিস্ট সম্ভবত যে কাজ করতে সবচেয়ে ভাল জায়গা। যদি আপনি এটি করেন, তবে কমপক্ষে কয়েক বছরের ব্যবধানে এটি করার ক্রস ব্রাউজারের উপায় হওয়ার সম্ভাবনা অনেক বেশি। অবশ্যই, এইচটিএমএল 5 এ অন্তর্ভুক্তির জন্য কোনও প্যাচ বা প্রস্তাব জমা দেওয়ার অর্থ এই ধারণাটিকে রক্ষা করার কিছু কাজ নয়, তবে ফায়ারফক্স ইতিমধ্যে এটি প্রয়োগ করেছে তা আপনাকে শুরু করার জন্য কিছু দেয়।

Comments

এর জন্য ধন্যবাদ - আমি মনে করি না আমি এই মুহুর্তে প্যাচ জমা দেওয়ার জন্য যথেষ্ট উত্সর্গীকৃত। এটি এমন কিছু যা আপনি সম্ভবত নিজের অজান্তেই ঘটতে চাইবেন না। এটি ব্রাউজারের স্যান্ডবক্সটি ভেঙে দেয় ...

— দামোভিসা

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

— ব্রায়ান ক্যাম্পবেল

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

— দামোভিসা

@ দামোভিসা আপনি এখনও এই বিষয়ে যত্নশীল কিনা তা আমি জানি না তবে আমি বুঝতে পেরেছিলাম যে নতুন ফাইল এপিআই যা আপনার সন্ধান করছে তা উল্লেখ করার জন্য আমি আমার উত্তরটি আপডেট করব এবং ফায়ারফক্স, ক্রোম এবং নাইট বিল্ডে প্রয়োগ করা হয়েছে সাফারি।

— ব্রায়ান ক্যাম্পবেল

দুর্দান্ত, এর জন্য ধন্যবাদ আমি অন্য কাজে চলে এসেছি, তবে উত্তরটি এখানে রয়েছে জেনে রাখা ভাল :)

— দামোভিসা

Answer 2

ব্যবহারকারীর দ্বারা নির্বাচিত একটি ফাইল পড়ার জন্য, একটি ফাইল উন্মুক্ত ডায়ালগ ব্যবহার করে, আপনি <input type="file">ট্যাগটি ব্যবহার করতে পারেন । এমএসডিএন থেকে আপনি এ সম্পর্কিত তথ্য পেতে পারেন । ফাইলটি যখন চয়ন করা হয় আপনি বিষয়বস্তু পড়তে ফাইলআরডার এপিআই ব্যবহার করতে পারেন ।

function onFileLoad(elementId, event) {
    document.getElementById(elementId).innerText = event.target.result;
}

function onChooseFile(event, onLoadFileHandler) {
    if (typeof window.FileReader !== 'function')
        throw ("The file API isn't supported on this browser.");
    let input = event.target;
    if (!input)
        throw ("The browser does not properly implement the event object");
    if (!input.files)
        throw ("This browser does not support the `files` property of the file input.");
    if (!input.files[0])
        return undefined;
    let file = input.files[0];
    let fr = new FileReader();
    fr.onload = onLoadFileHandler;
    fr.readAsText(file);
}

<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' />
<p id="contents"></p>

Comments

ইন্টারনেট এক্সপ্লোরারে কাজ করছেন না।

— মেরওয়াইস মুফাক

Answer 3

শুভ কোডিং!
আপনি যদি ইন্টারনেট এক্সপ্লোরারে কোনও ত্রুটি পান তবে অ্যাক্টিভএক্সকে অনুমতি দেওয়ার জন্য সুরক্ষা সেটিংস পরিবর্তন করুন

var CallBackFunction = function(content)
{
    alert(content);
}
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction); 

//Tested in Mozilla Firefox browser, Chrome
function ReadFileAllBrowsers(FileElement, CallBackFunction)
{
try
{
    var file = FileElement.files[0];
    var contents_ = "";

     if (file) {
        var reader = new FileReader();
        reader.readAsText(file, "UTF-8");
        reader.onload = function(evt)
        {
            CallBackFunction(evt.target.result);
        }
        reader.onerror = function (evt) {
            alert("Error reading file");
        }
    }
}
catch (Exception)
 {
    var fall_back =  ieReadFile(FileElement.value);
    if(fall_back != false)
    {
        CallBackFunction(fall_back);
    }
 }
}

///Reading files with Internet Explorer
function ieReadFile(filename)
{
 try
 {
    var fso  = new ActiveXObject("Scripting.FileSystemObject");
    var fh = fso.OpenTextFile(filename, 1);
    var contents = fh.ReadAll();
    fh.Close();
    return contents;
 }
 catch (Exception)
  {
    alert(Exception);
    return false;
  }
 }

Comments

অ্যাক্সেটিভ এক্স এখন (কৃতজ্ঞতার সাথে) মারা গেছে

— লিয়াম