来自 技术 2019-03-01 的文章

Web存储及文件拖拽 - 东小东

存储

实现内容的永久保存(localStorage)

保存:

localStorage.自定义键名=tareaobjx.value;

获取:

1 //判断是否有内容2 if(localStorage.自定义键名){3 //显示内容4 tareaobjx.value=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 }


标签:   DIV窗口层      php5.6环境一套   
上一篇:PHP中is_null($x)和$x === null的简单比较
下一篇:没有了