WEB SQL DATABASE
web sql database란 클라이언트 쪽에서 사용할 수 잇는 관계형 데이터 베이스.
클라이언트의 데이터 스토리지로 web storage나 indexed database API 등 몇 가지 사양이 있으나
sql을 이용한 유연한 데이터베이스 액세스가 가능하다는 장점이 있다.
dbTest.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var input = document.querySelector('input[type="file"]');
input.addEventListener("change", function(e) {
// FileList 객체
var files = e.target.files;
// 선택된 파일을 나타내는 file 객체
var file = files[0];
if (!file) {
return;
}
var reader = new FileReader();
// progress 이벤트 핸들러 지정
reader.onprogress = show_progress;
// load 이벤트 핸들러 지정
// loadend를 지정해야 완료된 후 100%가 표시된다.
reader.onloadend = show_progress;
// 바이너리 형식으로 파일 데이터 얻기
reader.readAsBinaryString(file);
}, false);
};
function show_progress(e) {
document.querySelector('#total').textContent = e.total;
document.querySelector('#loaded').textContent = e.loaded;
var rate = (e.loaded*100/e.total).toFixed(1);
document.querySelector('#rate').textContent = rate;
document.querySelector('progress').value = rate;
}
</script>
</head>
<body>
<p><input type="file"></p>
<p>
<progress value="0" max="100"></progress>
<span id="loaded">0</span> /
<span id="total">0</span> 바이트
(<span id="rate">0</span> %)
</p>
</body>
</html>
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] event : 이벤트 example (0) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] selector (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] file 접근 (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] geolocation, geolocation map (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] web worker (1) | 2019.05.22 |
