[HTML,CSS深化]12.暗号文を読み込む(txtファイル)
結果
プライマリコード <div class="row5"><button class="hidden" onclick="getTextFile()">수달의 비밀일기 보기</button></div>
<div class="diary" id="hide">
<div class="date">수달의 비밀 일기</div>
<div class="main" id="hidden-diary"></div>
</div>
<script>
function getTextFile(){
var input = document.createElement("input");
input.type="file";
input.accept="input/plain";
input.onchange=function(event){
processFile(event.target.files[0]);
};
input.click();
}
function processFile(file){
var reader = new FileReader();
reader.readAsText(file,"utf-8");
reader.onload= function(){
document.getElementById("hide").style.display="block";
document.getElementById("hidden-diary").innerText=reader.result;
};
}
</script>
//css
#hide{
display:none;
JavaScriptの説明
<script>
function getTextFile(){
var input = document.createElement("input"); input태그 요소를 하나 만들고 해당 요소의이름을 input이라고 이름 붙인다.
input.type="file";
input.accept="input/plain"; <input type="file" accept="text/plain"/>이라는 html코드와 같아진다.
input.onchange=function(event){ input태그에 변화개 생겼을때
processFile(event.target.files[0]); processFile이라는 함수가 실행된다.
};
input.click(); input을 클릭한다(변화시킴)
}
function processFile(file){
var reader = new FileReader(); 파일을 읽을 수 있는 reader라는걸 만든다.
reader.readAsText(file,"utf-8"); reader는 file을 utf-8형식으로 읽는다.
reader.onload= function(){ reader가 파일을 읽으면
document.getElementById("hide").style.display="block"; hide라는 id를가진 요소의 style의 display를 "block"으로 바꾼다.
document.getElementById("hidden-diary").innerText=reader.result; id가 "hidden-diary"인 요소의 텍스트를 reader의 결과값으로 대체한다.
};
}
</script>
Reference
この問題について([HTML,CSS深化]12.暗号文を読み込む(txtファイル)), 我々は、より多くの情報をここで見つけました
https://velog.io/@sue06004/HTMLCSS심화-12.-비밀글txt파일-불러오기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div class="row5"><button class="hidden" onclick="getTextFile()">수달의 비밀일기 보기</button></div>
<div class="diary" id="hide">
<div class="date">수달의 비밀 일기</div>
<div class="main" id="hidden-diary"></div>
</div>
<script>
function getTextFile(){
var input = document.createElement("input");
input.type="file";
input.accept="input/plain";
input.onchange=function(event){
processFile(event.target.files[0]);
};
input.click();
}
function processFile(file){
var reader = new FileReader();
reader.readAsText(file,"utf-8");
reader.onload= function(){
document.getElementById("hide").style.display="block";
document.getElementById("hidden-diary").innerText=reader.result;
};
}
</script>
//css
#hide{
display:none;
JavaScriptの説明
<script>
function getTextFile(){
var input = document.createElement("input"); input태그 요소를 하나 만들고 해당 요소의이름을 input이라고 이름 붙인다.
input.type="file";
input.accept="input/plain"; <input type="file" accept="text/plain"/>이라는 html코드와 같아진다.
input.onchange=function(event){ input태그에 변화개 생겼을때
processFile(event.target.files[0]); processFile이라는 함수가 실행된다.
};
input.click(); input을 클릭한다(변화시킴)
}
function processFile(file){
var reader = new FileReader(); 파일을 읽을 수 있는 reader라는걸 만든다.
reader.readAsText(file,"utf-8"); reader는 file을 utf-8형식으로 읽는다.
reader.onload= function(){ reader가 파일을 읽으면
document.getElementById("hide").style.display="block"; hide라는 id를가진 요소의 style의 display를 "block"으로 바꾼다.
document.getElementById("hidden-diary").innerText=reader.result; id가 "hidden-diary"인 요소의 텍스트를 reader의 결과값으로 대체한다.
};
}
</script>
Reference
この問題について([HTML,CSS深化]12.暗号文を読み込む(txtファイル)), 我々は、より多くの情報をここで見つけました https://velog.io/@sue06004/HTMLCSS심화-12.-비밀글txt파일-불러오기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol