Soru Javascript ile yerel disk dosyası nasıl açılır?


İle dosya açmaya çalıştım

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

Tarayıcı, yerel bir dosyayı bu şekilde, muhtemelen güvenlik nedenleriyle açmaya izin vermiyor. Dosyanın verilerini istemci tarafında kullanmak istiyorum. Javascript'te yerel dosyayı nasıl okuyabilirim?


118
2017-08-27 09:00


Menşei




Cevaplar:


İşte bir örnek 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>


gözlük

http://dev.w3.org/2006/webapi/FileAPI/

Tarayıcı Uyumluluğu

  • IE 10+
  • Firefox 3.6+
  • Chrome 13+
  • Safari 6.1+

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


184
2017-10-10 11:59



@SamusHands developer.mozilla.org/en-US/docs/Web/API/File/name - Paolo Moretti
Sadece bir saniye, aynı son dosyayı yeniden yüklediğimde, içerik değişmez (içeriğiyle ilgili olarak, dosya metnini düzenlediğimde söylüyorum). Yardım edebilir misin? - hydroper
@SamusHands Evet, haklısınız, sorunu Safari ve Chrome'da yeniden üretebiliyorum (Firefox'ta iyi çalışıyor). Girişin değerini ayarlamak null her birinde onClick olay hile yapmalı, bakın: stackoverflow.com/a/12102992/63011 - Paolo Moretti
Bu bir örnek olarak iyidir FileReaderama hakkında bir yorum displayContents yukarıda: bu ayarı not et innerHTML Güvenilir olmayan içerikle bunun gibi bir güvenlik açığı olabilir. (Bunu kendiniz görmek için bir bad.txt gibi bir şey içeren <img src="/nonexistent" onerror="alert(1);"> ve uyarının idam edildiğini görün - daha kötü kod olabilir.) - ShreevatsaR
@ShreevatsaR gerçekten iyi bir nokta. Snippet'im sadece bir örnektir, ancak haklısınız, kötü güvenlik alışkanlıklarını tanıtmamalı. Ben değiştirdim innerHTMLile textContent. Yorumun için teşekkürler. - Paolo Moretti


HTML5 fileReader özelliği yerel dosyaları işlemek için izin verir, ancak bunlar kullanıcı tarafından seçilebilir, dosyaları arayan kullanıcılar disk hakkında köklenme gidemezsiniz.

Bunu şu anda Chrome'un (6.x) geliştirme sürümleriyle kullanıyorum. Diğer tarayıcıların ne olduğunu bilmiyorum.


55
2017-08-27 09:16



Doğru, şimdi HTML5 ile mümkün. Buraya bak - Flavien Volken
Başvurulan özelliklerin hızlı bir şekilde taranması (en son güncellenen 2012-07-12), dosya yazmak için sadece okuma olmadığını gösterir. - HBP


Çünkü benim hayatım yok ve bu 4 itibar noktasını istiyorum, böylece sevgimi (kodları yanıtlayarak) kodlamada gerçekten iyi olan kişilere gösteriyorum. Paolo Moretti's kodu. Sadece kullan openFile(ilk parametre olarak dosya içeriği ile yürütülecek işlev).

function dispFile(contents) {
  document.getElementById('contents').innerHTML=contents
}
function clickElem(elem) {
	// Thx user1601638 on Stack Overflow (6/6/2018 - https://stackoverflow.com/questions/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>


6
2018-06-10 09:00





Javascript yerel dosyalara genellikle yeni tarayıcılarda erişemez, ancak XMLHttpRequest nesnesi dosyaları okumak için kullanılabilir. Yani aslında dosyayı okuyan Ajax (ve Javascript değil).

Eğer dosyayı okumak istersen abc.txt, kodu şu şekilde yazabilirsiniz:

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

şimdi txt abc.txt dosyasının içeriğini içerir.


0
2018-01-11 09:09



Ajax JavaScript'dir. - The Muffin Man
@TheMuffinMan ve XML. (Asynchronus Javascript ve XML) - thecoder16
Bu yanıt, sunucu tarafında bulunan dosyalar değil, istemci tarafında bulunan dosyaların nasıl açılacağı sorusuyla ilgili değildir. - Thomas Nguyen
@ThomasNguyen, bu soru "javascript açık dosya" ilk google sonucu ve bu cevap yine de yararlıdır. - Nathan Goings
Zarif Çözüm - Farzad YZ


Tarayıcı güvenliği bize izin vermediğinden, xmlhttp istek yöntemi yerel diskteki dosyalar için geçerli değildir. Ancak tarayıcı güvenliğini bir kısayol oluşturarak geçersiz kılabilirsiniz:> sağ tıklama-> özellikler Hedefte "... tarayıcı location path.exe "append --allow-dosya-access-from-files.This krom üzerinde test edilmiştir, ancak tüm tarayıcı pencerelerinin kapatılması gerektiğine ve kodun bu kısayolla açılmış tarayıcıdan çalıştırılmasına dikkat edilmelidir.


-2
2018-06-04 07:45





Yapamazsın. Firefox, Safari vb. Yeni tarayıcılar 'dosya' protokolünü engeller. Sadece eski tarayıcılarda çalışır.

İstediğiniz dosyaları yüklemeniz gerekecek.


-4
2017-08-27 09:09