জাভাস্ক্রিপ্ট দিয়ে লোকাল ডিস্ক ফাইল কীভাবে খুলবেন?


154

আমি দিয়ে ফাইল খুলতে চেষ্টা করেছি

window.open("file:///D:/Hello.txt");

সুরক্ষার কারণে সম্ভবত ব্রাউজারটি কোনও স্থানীয় ফাইল খোলার অনুমতি দেয় না। আমি ক্লায়েন্ট পক্ষের ফাইলের ডেটা ব্যবহার করতে চাই। আমি কীভাবে জাভাস্ক্রিপ্টে স্থানীয় ফাইল পড়তে পারি?

উত্তর:


238

এখানে ব্যবহার করে একটি উদাহরণ দেওয়া হয়েছে 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/

ব্রাউজার সামঞ্জস্য

  • IE 10+
  • ফায়ারফক্স 3.6+
  • ক্রোম 13+
  • সাফারি 6.1+

http://caniuse.com/#feat=fileapi


1
কেবলমাত্র এক সেকেন্ড, যখন আমি একই শেষ ফাইলটি পুনরায় লোড করি তখন সামগ্রীটি পরিবর্তন হয় না (আমি যখন ফাইলটির সম্পাদনা করি তখন এর সামগ্রী সম্পর্কে বলি)। তুমি কি সাহায্য করতে পারো?
হাইড্রোপার

1
@ সামাসহ্যান্ডস হ্যাঁ, আপনি ঠিক বলেছেন, আমি সাফারি এবং ক্রোমে সমস্যাটি পুনরুত্পাদন করতে পারি (এটি ফায়ারফক্সে ভাল কাজ করে)। nullপ্রতিটি onClickইভেন্টে ইনপুটটির
পাওলো মোরেটি

3
এটি উদাহরণ হিসাবে ভাল FileReader, তবে displayContentsউপরের একটি মন্তব্য : নোট করুন যে innerHTMLঅবিশ্বস্ত সামগ্রী সহ এ জাতীয় সেট করা সুরক্ষা দুর্বলতা হতে পারে। (নিজের জন্য এই দেখার জন্য, একটি তৈরি bad.txtধারণকারী মত <img src="/nonexistent" onerror="alert(1);">করিয়া দেখ, সতর্কতা মৃত্যুদন্ড কার্যকর এটা পরার আরো দূষিত কোড হতে পারে।)
ShreevatsaR

2
পছন্দ করুন আমার স্নিপেটটি কেবল একটি উদাহরণ, তবে আপনি ঠিক বলেছেন, এটির নিরাপত্তার খারাপ অভ্যাসগুলি প্রচার করা উচিত নয়। আমি innerHTMLসঙ্গে প্রতিস্থাপন textContent। আপনার মন্তব্যের জন্য ধন্যবাদ.
পাওলো মোরেত্তি

1
@ টেলারহালামা আপনিও এর DOMContentLoadedজন্য ইভেন্টটি ব্যবহার করতে পারেন ।
পাওলো মোরেটি

59

HTML5 এর fileReader সুবিধা আপনি স্থানীয় ফাইলগুলিতে প্রক্রিয়া করার অনুমতি দেয় না, কিন্তু এই ব্যবহারকারী দ্বারা নির্বাচিত হতে হবে, আপনার সম্পর্কে ব্যবহারকারীদের ডিস্ক ফাইল খুঁজছেন Rooting হতে পারে না।

আমি বর্তমানে এটি ক্রোমের বিকাশ সংস্করণ (6.x) সহ ব্যবহার করি। অন্যান্য ব্রাউজারগুলি এটি সমর্থন করে তা আমি জানি না।


3
ঠিক আছে, এটি এখন HTML5 দিয়ে সম্ভব possible এখানে দেখুন
ফ্ল্যাভিয়ান ভলকেন

1
রেফারেন্সড স্পেকের একটি দ্রুত স্ক্যান (সর্বশেষ আপডেট করা হয়েছে 2012-07-12) কেবলমাত্র পড়ার জন্য ফাইল লেখার কোনও সুবিধা দেখায় না।
এইচবিপি 4'12

26

কারণ আমি কোন জীবন আছে এবং আমি ঐ 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>


2
ধন্যবাদ, সহায়ক ছিল। যদিও আপনার যে কোডটি রয়েছে clickElem()সেটির পরিবর্তে আপনি কেবল কল করতে পারেন তা নোট করুন fileInput.click()। (কমপক্ষে ক্রোমের সর্বশেষতম সংস্করণে)
ভেনরিক্স

6

চেষ্টা

function readFile(file) {
  return new Promise((resolve, reject) => {
    let fr = new FileReader();
    fr.onload = x=> resolve(fr.result);
    fr.readAsText(file);
})}

তবে ফাইলটি চয়ন করতে ব্যবহারকারীর পদক্ষেপ নেওয়া দরকার


আমি স্রেফ URL.innerText দেখেছি এবং প্রথমবারের মতো আমি জানতে পারি যে আইডি দিয়ে চিহ্নিত কিছু উপাদান উইন্ডো অবজেক্টের ভেরিয়েবল নাম বা বৈশিষ্ট্য হিসাবে আইডি ব্যবহার করে অ্যাক্সেস করা যায়।
ফামালিনা

সুতরাং উত্তর আমরা করতে পারি না । এইচটিএমএল ডকুমেন্ট মিথস্ক্রিয়া জন্য তাই নিখুঁত বলে মনে হচ্ছে! তবে সব কিছুই পরিবেশন করা যায় না। একটি স্থানীয় ফাইল অ্যাক্সেস দুর্দান্ত হত
yota

@ ইয়োটা - ব্রাউজার ব্যবহারকারীদের নিরাপত্তার কারণে সম্ভবত ইন্টারঅ্যাক্ট করতে (এবং সচেতন হতে হবে)
কামিল কিয়েসজেউসকি

-4

স্থানীয় ডিস্কে থাকা ফাইলগুলির জন্য এক্সএমএলএইচটিপি অনুরোধ পদ্ধতি বৈধ নয় কারণ ব্রাউজার সুরক্ষা আমাদের এটি করার অনুমতি দেয় না ut তবে আমরা একটি শর্টকাট-> ডান ক্লিক ক্লিক করে> বৈশিষ্ট্যগুলি লক্ষ্যযুক্ত করে ব্রাউজারের সুরক্ষাটিকে ওভাররাইড করতে পারি "... ব্রাউজার অবস্থানের পথ.এক্সে "অ্যাপড - ফাইল-অ্যাক্সেস-থেকে-ফাইলগুলি ফাইল করুন। এটি ক্রোমের উপর পরীক্ষা করা হয়, তবে যত্ন নেওয়া উচিত যে সমস্ত ব্রাউজার উইন্ডোজ বন্ধ করা উচিত এবং এই শর্টকাটের মাধ্যমে ব্রাউজারটি থেকে কোডটি চালানো উচিত।


-7

আপনি পারবেন না। ফায়ারফক্স, সাফারি ইত্যাদির মতো নতুন ব্রাউজারগুলি 'ফাইল' প্রোটোকলটিকে অবরুদ্ধ করে। এটি কেবল পুরানো ব্রাউজারগুলিতে কাজ করবে।

আপনার নিজের পছন্দ মতো ফাইলগুলি আপলোড করতে হবে।


-9

জাভাস্ক্রিপ্ট সাধারণত নতুন ব্রাউজারগুলিতে স্থানীয় ফাইলগুলিতে অ্যাক্সেস করতে পারে না তবে এক্সএমএলএইচটিপিআরকোয়েস্ট অবজেক্টটি ফাইল পড়তে ব্যবহার করা যেতে পারে। সুতরাং এটি আসলে অ্যাজাক্স (এবং জাভাস্ক্রিপ্ট নয়) যা ফাইলটি পড়ছে।

আপনি যদি ফাইলটি পড়তে চান তবে আপনি 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 ফাইলের বিষয়বস্তু রয়েছে।


61
অ্যাজাক্সটি জাভাস্ক্রিপ্ট।
মাফিন ম্যান

4
@ দ্য মফিনমান এবং এক্সএমএল। (অ্যাসিনক্রোনাস জাভাস্ক্রিপ্ট এবং এক্সএমএল)
কুইন্টেক

9
সার্ভারে থাকা ফাইলগুলিতে নয়, ক্লায়েন্টের পাশে থাকা ফাইলগুলি কীভাবে খুলতে হবে তার জন্য ওপি জিজ্ঞাসা করায় এই উত্তরটি প্রাসঙ্গিক নয়।
টমাস এনগুইন

4
@ থমাসনগুইন, এই প্রশ্নটি "জাভাস্ক্রিপ্ট ওপেন ফাইল" এর প্রথম গুগল ফলাফল এবং তবুও এই উত্তরটি উপকারী।
নাথন গোয়ংস

@ থমাসগুইয়েন আমি সম্মত, তবে ফাইলআরডার ব্যতীত একটি সম্ভাব্য কাজ হ'ল ফাইলটি সার্ভারে আপলোড করা এবং সেখান থেকে পড়তে হবে। তবুও আমি এই উত্তরটিকে অগ্রাহ্য করেছি।
inf3rno
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.