存储
实现内容的永久保存(localStorage)
保存:
localStorage. 自定义键名 = tareaobjx.value;
获取:
- // 判断是否有内容
- if(localStorage. 自定义键名){
- // 显示内容
tareaobjx.value=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);
- }
来源: https://www.cnblogs.com/dongxiaodong/p/10421438.html