存储
实现内容的永久保存（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 }
作者：东小东
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦