답변:
다음은 다음을 사용하는 예입니다 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이벤트 에서 입력 값을 설정하면 트릭을 수행해야합니다. stackoverflow.com/a/12102992/63011
FileReader의 설명은 신뢰할 수 없습니다. 신뢰할 수없는 콘텐츠를 사용하여 이와 같이 displayContents설정 innerHTML하면 보안 취약점이 될 수 있습니다. (자신을 위해이를 확인하려면 bad.txt다음과 같은 <img src="/nonexistent" onerror="alert(1);">내용을 포함하고 경고가 실행
innerHTML했습니다 textContent. 귀하의 의견에 감사드립니다.
DOMContentLoaded이벤트를 사용할 수 있습니다 .
HTML5을 FileReader 시설은 로컬 파일을 처리 할 수 있도록 않지만, 다음은, 당신은 파일을 찾는 사용자의 디스크에 대한 응원을 갈 수 없어 사용자가 선택해야합니다.
현재 Chrome (6.x) 개발 버전에서이 기능을 사용하고 있습니다. 다른 브라우저에서 어떤 브라우저를 지원하는지 모르겠습니다.
나는 삶이없고 그 4 가지 평판 포인트를 원하기 때문에 실제로 코딩에 능숙한 사람들에게 내 사랑을 보여줄 수 있기 때문에 나는 Paolo 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(). (최소한 최신 버전의 Chrome에서)
시험
function readFile(file) {
return new Promise((resolve, reject) => {
let fr = new FileReader();
fr.onload = x=> resolve(fr.result);
fr.readAsText(file);
})}하지만 사용자는 파일을 선택하기 위해 조치를 취해야합니다
브라우저 보안은 그렇게 할 수 없기 때문에 xmlhttp 요청 메소드는 로컬 디스크의 파일에 유효하지 않습니다. location path.exe "append --allow-file-access-from-files. 크롬에서 테스트되지만 모든 브라우저 창을 닫고이 바로 가기를 통해 열린 브라우저에서 코드를 실행해야합니다.
Javascript는 일반적으로 새 브라우저에서 로컬 파일에 액세스 할 수 없지만 XMLHttpRequest 객체를 사용하여 파일을 읽을 수 있습니다. 따라서 실제로 파일을 읽는 것은 Ajax (Javascript 아님)입니다.
파일을 읽으려면 다음 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 파일의 내용이 들어 있습니다.