Day08（HTML5 demo 读取文件，存取数据）
2017-11-07 本文已影响0人
AnnQi
读取文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div><input type="file" id="myfile" multiple="multiple"/></div>
<div id="box"></div>
</body>
<script type="text/javascript">
var myfile =document.getElementById("myfile");
var box = document.getElementById("box")
myfile.onchange = function(){
// console.log(myfile.files[0].name);
if(myfile.files[0]){ // 如果选择文件
for(var i=0;i<myfile.files.length;i++){
// continue 本次循环中continue语句不执行，直接执行 i++
if(myfile.files[i].type.indexOf("image")==-1) continue;
var fs = new FileReader();
fs.readAsDataURL(myfile.files[i]); // 读取文件
fs.onload = function(){
var imgdata = this.result; // base 64
var img = new Image();
img.src = imgdata;
box.appendChild(img);
}
}
}
}
</script>
</html>
存，取 数据
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="save">存</button>
<button id="fetch">取</button>
</body>
<script>
var btnsave = document.getElementById("save");
var btnfatch = document.getElementById("fetch");
//session 会话
btnsave.onclick = function(){
//sessionStorage.setItem("mysave","canvas"); //用户打开浏览器到关闭期间的数据，适合用户登录期间的数据
localStorage.setItem("mysave","canvas") // 长期存在用户的浏览器里，除非删除
alert("save successfully!");
}
btnfatch.onclick = function(){
//alert(sessionStorage.getItem("mysave"));
alert(localStorage.getItem("mysave"));
}
</script>
</html>
表单存取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
用户名：<input type="text"/>
密码：<input type="text"/>
确认密码：<input type="text"/>
电话：<input type="text"/>
</form>
</body>
<script type="text/javascript">
var inputs = document.getElementsByTagName("input");
window.onunload = function(){
var arr = [];
for(var i=0;i<inputs.length;i++){
arr.push(inputs[i].value);
}
localStorage.setItem("mysaveForm",arr);
}
window.onload = function(){
var getArr = localStorage.getItem("mysaveForm").split(",");
for(var i=0;i<getArr.length;i++){
inputs[i].value = getArr[i];
}
}
</script>
</html>
