Web存储及文件拖拽

时间 2019-11-20

标签 web 存储文件栏目 HTML 繁體版

原文原文链接

存储

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

保存：html

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

获取：缓存

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

只在当前页面存储（sessionStorage）session

保存和获取方法与上相同app

缓存

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

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

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

开启缓存：htm

在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 }