Web存储及文件拖拽

存储

实现内容的永久保存（localStorage）

保存：

localStorage.自定义键名="123";

获取：

 //判断是否有内容
 if(localStorage.自定义键名){
     //显示内容
     alert(localStorage.自定义键名);
 }

只在当前页面存储（sessionStorage）

保存和获取方法与上相同

缓存

CACHE MANIFEST在该标题下列出的文件将会在首次进行缓存

NETWORK 在该标题下的文件将不进行缓存

FALLBACK在该标题下的文件将会在规定页面无法访问时跳转的其它页面

开启缓存：

在html标签中添加属性manifest,并指定值为文件名

<html manifest="dongcache.appcache">

设置缓存：

创建dongcache.appcache文件

 CACHE MANIFEST

 CACHE:
 kk.html
 dong.css
 dong.js

 NETWORK:

 FALLBACK:

文件拖拽

实现本地图片拖拽并预览

 var divobjx=document.getElementsByTagName("div")[0];
 //屏蔽系统默认事件
 divobjx.ondragover=function(e){
     e.preventDefault();
 }
 //监听拖拽事件
 divobjx.ondrop=function(e){
     e.preventDefault();
     var f=e.dataTransfer.files[0];//得到文件对象
     alert(f.name+"***"+f.size+"***"+f.type);//得到文件信息
     var fr=new FileReader();

     fr.onload=function(e){
         divobjx.innerHTML="<img src='"+fr.result+"'\>";
         alert(fr.result);
       }
     fr.readAsDataURL(f);
 }

表单文件内容获取：

 <input type="file" name="setfilex" />
 <script>
 var ffobjx=document.getElementsByName("setfilex")[0];
 ffobjx.onchange=function(){
     f=ffobjx.files[0];
     alert(f.name+"****"+f.size+"*****"+f.type);
 }
 </script>

综合代码

文件上传（选择文件和拖拽文件）预览和设置到form表单上

 var ffobjx=document.getElementsByName("setfilex")[0];//得到文件表单对象    （input）
 //监听文件表单的内容改变
 ffobjx.onchange=function(){
     f=ffobjx.files[0];
     showfile(f);
     //alert(f.name+"****"+f.size+"*****"+f.type);
 }
 var divobjx=document.getElementById("filediv");//得到文件拖拽框对象
 //屏蔽系统默认事件
 divobjx.ondragover=function(e){
     e.preventDefault();
 }
 //监听拖拽事件
 divobjx.ondrop=function(e){
     e.preventDefault();
     var f=e.dataTransfer.files[0];//得到文件对象
     ffobjx.files=e.dataTransfer.files;//将拖拽信息设置到表单上
     showfile(fr);
 }
 //显示文件，暂时设置为显示图片
 function showfile(f11){
     //alert(f.name+"***"+f.size+"***"+f.type);//得到文件信息
     var fr=new FileReader();
     fr.onload=function(e){
         divobjx.innerHTML="<img id='fileimg' src='"+fr.result+"'\>";
         //alert(fr.result);
      }
     fr.readAsDataURL(f11);
 }

---