Web存储及文件拖拽

存储

实现内容的永久保存(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 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)