উত্তর:
এখানে ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে FileReader:
function readSingleFile(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
displayContents(contents);
};
reader.readAsText(file);
}
function displayContents(contents) {
var element = document.getElementById('file-content');
element.textContent = contents;
}
document.getElementById('file-input')
.addEventListener('change', readSingleFile, false);
<input type="file" id="file-input" />
<h3>Contents of the file:</h3>
<pre id="file-content"></pre>
http://dev.w3.org/2006/webapi/FileAPI/
nullপ্রতিটি onClickইভেন্টে ইনপুটটির
FileReader, তবে displayContentsউপরের একটি মন্তব্য : নোট করুন যে innerHTMLঅবিশ্বস্ত সামগ্রী সহ এ জাতীয় সেট করা সুরক্ষা দুর্বলতা হতে পারে। (নিজের জন্য এই দেখার জন্য, একটি তৈরি bad.txtধারণকারী মত <img src="/nonexistent" onerror="alert(1);">করিয়া দেখ, সতর্কতা মৃত্যুদন্ড কার্যকর এটা পরার আরো দূষিত কোড হতে পারে।)
innerHTMLসঙ্গে প্রতিস্থাপন textContent। আপনার মন্তব্যের জন্য ধন্যবাদ.
DOMContentLoadedজন্য ইভেন্টটি ব্যবহার করতে পারেন ।
HTML5 এর fileReader সুবিধা আপনি স্থানীয় ফাইলগুলিতে প্রক্রিয়া করার অনুমতি দেয় না, কিন্তু এই ব্যবহারকারী দ্বারা নির্বাচিত হতে হবে, আপনার সম্পর্কে ব্যবহারকারীদের ডিস্ক ফাইল খুঁজছেন Rooting হতে পারে না।
আমি বর্তমানে এটি ক্রোমের বিকাশ সংস্করণ (6.x) সহ ব্যবহার করি। অন্যান্য ব্রাউজারগুলি এটি সমর্থন করে তা আমি জানি না।
কারণ আমি কোন জীবন আছে এবং আমি ঐ 4 খ্যাতি পয়েন্ট চান তাই আমি (দ্বারা ভোট দিন উত্তর) মানুষের যিনি প্রকৃতপক্ষে কোডিং আমি আমার অভিযোজন ভাগ করেছি ভালো হয় আমার ভালবাসা দেখাতে পারেন যে পাওলো Moretti এর কোড। openFile(প্রথম প্যারামিটার হিসাবে ফাইলের বিষয়বস্তুগুলির সাথে সম্পাদন করতে কেবল ফাংশনটি ব্যবহার করুন) ।
function dispFile(contents) {
document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
// Thx user1601638 on Stack Overflow (6/6/2018 - /programming/13405129/javascript-create-and-save-file )
var eventMouse = document.createEvent("MouseEvents")
eventMouse.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
elem.dispatchEvent(eventMouse)
}
function openFile(func) {
readFile = function(e) {
var file = e.target.files[0];
if (!file) {
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
fileInput.func(contents)
document.body.removeChild(fileInput)
}
reader.readAsText(file)
}
fileInput = document.createElement("input")
fileInput.type='file'
fileInput.style.display='none'
fileInput.onchange=readFile
fileInput.func=func
document.body.appendChild(fileInput)
clickElem(fileInput)
}
Click the button then choose a file to see its contents displayed below.
<button onclick="openFile(dispFile)">Open a file</button>
<pre id="contents"></pre>
clickElem()সেটির পরিবর্তে আপনি কেবল কল করতে পারেন তা নোট করুন fileInput.click()। (কমপক্ষে ক্রোমের সর্বশেষতম সংস্করণে)
চেষ্টা
function readFile(file) {
return new Promise((resolve, reject) => {
let fr = new FileReader();
fr.onload = x=> resolve(fr.result);
fr.readAsText(file);
})}
তবে ফাইলটি চয়ন করতে ব্যবহারকারীর পদক্ষেপ নেওয়া দরকার
স্থানীয় ডিস্কে থাকা ফাইলগুলির জন্য এক্সএমএলএইচটিপি অনুরোধ পদ্ধতি বৈধ নয় কারণ ব্রাউজার সুরক্ষা আমাদের এটি করার অনুমতি দেয় না ut তবে আমরা একটি শর্টকাট-> ডান ক্লিক ক্লিক করে> বৈশিষ্ট্যগুলি লক্ষ্যযুক্ত করে ব্রাউজারের সুরক্ষাটিকে ওভাররাইড করতে পারি "... ব্রাউজার অবস্থানের পথ.এক্সে "অ্যাপড - ফাইল-অ্যাক্সেস-থেকে-ফাইলগুলি ফাইল করুন। এটি ক্রোমের উপর পরীক্ষা করা হয়, তবে যত্ন নেওয়া উচিত যে সমস্ত ব্রাউজার উইন্ডোজ বন্ধ করা উচিত এবং এই শর্টকাটের মাধ্যমে ব্রাউজারটি থেকে কোডটি চালানো উচিত।
জাভাস্ক্রিপ্ট সাধারণত নতুন ব্রাউজারগুলিতে স্থানীয় ফাইলগুলিতে অ্যাক্সেস করতে পারে না তবে এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্টটি ফাইল পড়তে ব্যবহার করা যেতে পারে। সুতরাং এটি আসলে অ্যাজাক্স (এবং জাভাস্ক্রিপ্ট নয়) যা ফাইলটি পড়ছে।
আপনি যদি ফাইলটি পড়তে চান তবে আপনি abc.txtকোডটি লিখতে পারেন:
var txt = '';
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
txt = xmlhttp.responseText;
}
};
xmlhttp.open("GET","abc.txt",true);
xmlhttp.send();
এখন txtabc.txt ফাইলের বিষয়বস্তু রয়েছে।