存储
实现内容的永久保存(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:
文件拖拽
实现本地图片拖拽并预览
var divobjx=document.getElementsByTagName("div")[0]; 2 屏蔽系统默认事件 3 divobjx.ondragover=function(e){ e.preventDefault(); } 监听拖拽事件 7 divobjx.ondrop= 9 var f=e.dataTransfer.files[0];得到文件对象 10 alert(f.name+"***"+f.size+"***"+f.type);得到文件信息 11 var fr=new FileReader(); 12 13 fr.onload=14 divobjx.innerHTML="<img src='"+fr.result+"'\>"; 15 alert(fr.result); 16 } 17 fr.readAsDataURL(f); 18 }
表单文件内容获取:
input type="file" name="setfilex" /> script> 3 var ffobjx=document.getElementsByName("setfilex)[0]; 4 ffobjx.onchangefunction(){ 5 fffobjx.files[6 alert(f.name+****f.size*****f.type); 7 } 8 </>
综合代码
文件上传(选择文件和拖拽文件)预览和设置到form表单上
var ffobjx=document.getElementsByName("setfilex")[0];得到文件表单对象 (input) 监听文件表单的内容改变 3 ffobjx.onchange= 4 f=ffobjx.files[0 showfile(f); 6 alert(f.name+"****"+f.size+"*****"+f.type); 7 var divobjx=document.getElementById("filediv");得到文件拖拽框对象 9 10 divobjx.ondragover=11 12 13 14 divobjx.ondrop=16 17 ffobjx.files=e.dataTransfer.files;将拖拽信息设置到表单上 18 showfile(fr); 19 20 显示文件,暂时设置为显示图片 21 showfile(f11){ 22 alert(f.name+"***"+f.size+"***"+f.type);//得到文件信息 23 24 fr.onload=25 divobjx.innerHTML="<img id='fileimg' src='"+fr.result+"'\>"26 alert(fr.result); 27 } 28 fr.readAsDataURL(f11); 29 }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。