Aku mencoba untuk membuka file dengan
window.open("file:///D:/Hello.txt");
Browser tidak memungkinkan pembukaan file lokal dengan cara ini, mungkin untuk alasan keamanan. Saya ingin menggunakan file's data di sisi client. Bagaimana saya bisa membaca file lokal di JavaScript?
Berikut ini's contoh menggunakan 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/
The HTML5 fileReader fasilitas tidak memungkinkan anda untuk memproses file lokal, tapi ini HARUS dipilih oleh pengguna, anda tidak bisa pergi rooting tentang pengguna disk untuk mencari file.
Saat ini saya menggunakan ini dengan versi pengembangan dari Chrome (6.x). Saya don't tahu apa browser yang lain mendukungnya.
Karena saya tidak memiliki kehidupan dan saya ingin orang-orang 4 poin reputasi sehingga saya bisa menunjukkan cinta saya untuk (upvote jawaban oleh) orang-orang yang benar-benar baik di coding saya've bersama saya adaptasi dari Paolo Moretti's code. Hanya menggunakan openFile(
function akan dieksekusi dengan isi file sebagai pertama parameter)
.
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>
Mencoba
function readFile(file) {
return new Promise((resolve, reject) => {
let fr = new FileReader();
fr.onload = x=> resolve(fr.result);
fr.readAsText(file);
})}
function readFile(file) {
return new Promise((resolve, reject) => {
let fr = new FileReader();
fr.onload = x=> resolve(fr.result);
fr.readAsText(file);
})}
async function read(input) {
msg.innerText = await readFile(input.files[0]);
}
<input type="file" onchange="read(this)"/>
<h3>Content:</h3><pre id="msg"></pre>
Xmlhttp request cara ini tidak berlaku untuk file-file pada disk lokal karena keamanan browser yang tidak memungkinkan kita untuk melakukannya.Tapi kita dapat mengesampingkan keamanan browser dengan membuat shortcut->klik kanan->sifat Dalam target "... lokasi browser path.exe" - memungkinkan menambahkan file-akses-dari-file.Ini diuji pada chrome,namun perawatan harus diambil bahwa semua browser jendela harus ditutup dan kode harus dijalankan dari browser dibuka melalui jalan pintas ini.
Javascript tidak biasanya mengakses file lokal di browser baru tapi object XMLHttpRequest dapat digunakan untuk membaca file. Jadi itu benar-benar Ajax (dan tidak Javascript) yang membaca file tersebut.
Jika anda ingin membaca file abc.txt
, anda dapat menulis kode seperti:
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();
Sekarang txt
berisi isi dari file abc.txt.