Web存储及文件拖拽
存储
实现内容的永久保存（localStorage）
保存：
localStorage.自定义键名="123";
获取：
1 //判断是否有内容 2 if(localStorage.自定义键名){ 3 //显示内容 4 alert(localStorage.自定义键名); 5 }
只在当前页面存储（sessionStorage）
保存和获取方法与上相同
缓存
CACHE MANIFEST在该标题下列出的文件将会在首次进行缓存
NETWORK 在该标题下的文件将不进行缓存
FALLBACK在该标题下的文件将会在规定页面无法访问时跳转的其它页面
开启缓存：
在html标签中添加属性manifest,并指定值为文件名
<html manifest="dongcache.appcache">
设置缓存：
创建dongcache.appcache文件
1 CACHE MANIFEST 2 3 CACHE: 4 kk.html 5 dong.css 6 dong.js 7 8 NETWORK: 9 10 FALLBACK:
文件拖拽
实现本地图片拖拽并预览
1 var divobjx=document.getElementsByTagName("div")[0]; 2 //屏蔽系统默认事件 3 divobjx.ondragover=function(e){ 4 e.preventDefault(); 5 } 6 //监听拖拽事件 7 divobjx.ondrop=function(e){ 8 e.preventDefault(); 9 var f=e.dataTransfer.files[0];//得到文件对象 10 alert(f.name+"***"+f.size+"***"+f.type);//得到文件信息 11 var fr=new FileReader(); 12 13 fr.onload=function(e){ 14 divobjx.innerHTML="<img src='"+fr.result+"'\>"; 15 alert(fr.result); 16 } 17 fr.readAsDataURL(f); 18 }
表单文件内容获取：
1 <input type="file" name="setfilex" /> 2 <script> 3 var ffobjx=document.getElementsByName("setfilex")[0]; 4 ffobjx.onchange=function(){ 5 f=ffobjx.files[0]; 6 alert(f.name+"****"+f.size+"*****"+f.type); 7 } 8 </script>
综合代码
文件上传（选择文件和拖拽文件）预览和设置到form表单上
1 var ffobjx=document.getElementsByName("setfilex")[0];//得到文件表单对象 （input） 2 //监听文件表单的内容改变 3 ffobjx.onchange=function(){ 4 f=ffobjx.files[0]; 5 showfile(f); 6 //alert(f.name+"****"+f.size+"*****"+f.type); 7 } 8 var divobjx=document.getElementById("filediv");//得到文件拖拽框对象 9 //屏蔽系统默认事件 10 divobjx.ondragover=function(e){ 11 e.preventDefault(); 12 } 13 //监听拖拽事件 14 divobjx.ondrop=function(e){ 15 e.preventDefault(); 16 var f=e.dataTransfer.files[0];//得到文件对象 17 ffobjx.files=e.dataTransfer.files;//将拖拽信息设置到表单上 18 showfile(fr); 19 } 20 //显示文件，暂时设置为显示图片 21 function showfile(f11){ 22 //alert(f.name+"***"+f.size+"***"+f.type);//得到文件信息 23 var fr=new FileReader(); 24 fr.onload=function(e){ 25 divobjx.innerHTML="<img id='fileimg' src='"+fr.result+"'\>"; 26 //alert(fr.result); 27 } 28 fr.readAsDataURL(f11); 29 }
