Web存储及文件拖拽

最新推荐文章于 2023-11-02 14:23:25 发布

┈┾ 上帝の恩惠

最新推荐文章于 2023-11-02 14:23:25 发布

阅读量296

点赞数

Web存储及文件拖拽
存储
实现内容的永久保存（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.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.function(e){
         divobjx.innerHTML="<img id='fileimg' src='"+fr.result+"'\>";
         //alert(fr.result);
      }
     fr.readAsDataURL(f11);
 }

┈┾ 上帝の恩惠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web存储及文件拖拽

Web存储及文件拖拽存储实现内容的永久保存（localStorage）保存：localStorage.自定义键名=tareaobjx.value;获取：//判断是否有内容if(localStorage.自定义键名){ //显示内容 tareaobjx.value=localStorage.自定义键名; }只在当前页面存储（sessionStorage）保...
复制链接

扫一扫