728x90
<input type="file" id="id_select" value="">input type file은 파일 업로드시 사용
보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가능
읽기는 사용자가 선택해주는 파일만 읽기 가능
<script>
var v_file = document.getElementById("id_select");
function f_file() {
// files는 file객체들을 가진 배열이라고 생각하면 좋음
console.log(v_file.files[0].name); // files 속성 눈으로 확인!
var v_file = v_file.files[0]; // file객체는 뽑아냄
var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
v_fileReader.readAsText(); // 텍스트 파일을 읽어라
}
</script>더보기
<프리뷰.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
읽기는 사용자가 선택해주는 파일만 읽기 가능!
-->
<input type=file id="id_select" value="" onchange="f_file()">
<script>
var v_file = document.getElementById("id_select");
function f_file() {
// files는 file객체들을 가진 배열이라고 생각하면 좋음
console.log(v_file.files[0].name); // files 속성 눈으로 확인!
var v_file = v_file.files[0]; // file객체는 뽑아냄
var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
v_fileReader.readAsText(); // 텍스트 파일을 읽어라
}
</script>
</body>
</html>
<프리뷰.html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
읽기는 사용자가 선택해주는 파일만 읽기 가능!
-->
<input type=file id="id_select" value="" onchange="f_file()">
<script>
var v_file = document.getElementById("id_select");
function f_file() {
// files는 file객체들을 가진 배열이라고 생각하면 좋음
console.log(v_file.files[0].name); // files 속성 눈으로 확인!
var v_file2 = v_file.files[0]; // file객체는 뽑아냄
var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
v_fileReader.readAsText(v_file2); // 텍스트 파일을 읽어라
v_fileReader.onload = function(){
// 다 읽고나면 result라는 속성에 그 값을 담아줌
alert(v_fileReader.result);
}
}
</script>
</body>
</html><텍스트파일.txt>
박성연 만만세
박성연 만만세
박성연 만만세
텍스트파일 읽기보다는 이미지 파일을 읽을때가 더 많다
//v_fileReader.readAsText(v_file2); // 텍스트 파일을 읽어라
v_fileReader.readAsDataURL(v_file2); // 이미지 파일읽기, 가장 많이 씀<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
읽기는 사용자가 선택해주는 파일만 읽기 가능!
-->
<input type=file id="id_select" value="" onchange="f_file()">
<script>
var v_file = document.getElementById("id_select");
function f_file() {
// files는 file객체들을 가진 배열이라고 생각하면 좋음
console.log(v_file.files[0].name); // files 속성 눈으로 확인!
var v_file2 = v_file.files[0]; // file객체는 뽑아냄
var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
//v_fileReader.readAsText(v_file2); // 텍스트 파일을 읽어라
v_fileReader.readAsDataURL(v_file2); // 이미지 파일읽기, 가장 많이 씀
v_fileReader.onload = function () {
// 다 읽고나면 result라는 속성에 그 값을 담아줌
alert(v_fileReader.result);
}
}
</script>
</body>
</html>
alt는 사진 없을 때 사진 대신에 사용
<img src="#" id="id_sajin" width="100" height="100" alt="이미지 있어?"><br>
이미지를 src속성에다 주기
document.getElementById("id_sajin").src= v_fileReader.result;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
읽기는 사용자가 선택해주는 파일만 읽기 가능!
-->
<img src="#" id="id_sajin" width="100" height="100" alt="이미지 있어?"><br>
<input type=file id="id_select" value="" onchange="f_file()">
<script>
var v_file = document.getElementById("id_select");
function f_file() {
// files는 file객체들을 가진 배열이라고 생각하면 좋음
console.log(v_file.files[0].name); // files 속성 눈으로 확인!
var v_file2 = v_file.files[0]; // file객체는 뽑아냄
var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
//v_fileReader.readAsText(v_file2); // 텍스트 파일을 읽어라
v_fileReader.readAsDataURL(v_file2); // 이미지 파일읽기, 가장 많이 씀
v_fileReader.onload = function () {
// 다 읽고나면 result라는 속성에 그 값을 담아줌
// alert(v_fileReader.result);
document.getElementById("id_sajin").src= v_fileReader.result;
}
}
</script>
</body>
</html>
accept
내가 지정한 파일만 보여줌(사용자의 편의를 위함)
<input type=file id="id_select" value="" accept=",jpg,.jpeg,.png,.gif" onchange="f_file()"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 보안상의 이유로 사용자 컴퓨터에 파일을 쓰는 것은 불가
읽기는 사용자가 선택해주는 파일만 읽기 가능!
-->
<img src="#" id="id_sajin" width="100" height="100" alt="이미지 있어?"><br>
<input type=file id="id_select" value="" accept=",jpg,.jpeg,.png,.gif" onchange="f_file()">
<script>
var v_file = document.getElementById("id_select");
function f_file() {
// files는 file객체들을 가진 배열이라고 생각하면 좋음
console.log(v_file.files[0].name); // files 속성 눈으로 확인!
var v_file2 = v_file.files[0]; // file객체는 뽑아냄
var v_fileReader = new FileReader(); // file 읽어줄 사람 필요
//v_fileReader.readAsText(v_file2); // 텍스트 파일을 읽어라
v_fileReader.readAsDataURL(v_file2); // 이미지 파일읽기, 가장 많이 씀
v_fileReader.onload = function () {
// 다 읽고나면 result라는 속성에 그 값을 담아줌
// alert(v_fileReader.result);
document.getElementById("id_sajin").src= v_fileReader.result;
}
}
</script>
</body>
</html>