存储

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

保存：

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

获取：

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

只在当前页面存储（sessionStorage）

保存和获取方法与上相同

缓存

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

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

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

开启缓存：

在html标签中添加属性manifest,并指定值为文件名

  1. <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.  }

Web存储及文件拖拽的更多相关文章

  1. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  2. VC实现文件拖拽OnDropFiles

    文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...

  3. C#之winform实现文件拖拽功能

    将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了 将一个控件的属性AllowDrop设置为true,然后添加DragDrop.DragEnter ...

  4. Linux下安装VMware Tools（使虚拟机支持文件拖拽）

    如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包 ...

  5. html5 drag 文件拖拽浅淡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. C# 之文件拖拽和pixturBox缩放与拖拽

    文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...

  7. php和js实现文件拖拽上传

    Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...

  8. wxpython实现文件拖拽

    我想让wx.grid里面的单元格能够支持文件拖拽,实现起来挺简单的,共分3步: 1.创建一个wx.FileDropTarget子类的对象,并把要支持拖拽的控件传给它的构造函数,此处是grid 2.调用 ...

  9. C#之winform实现文件拖拽功能【转】

    将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了 将一个控件的属性AllowDrop设置为true,然后添加DragDrop.DragEnter ...

随机推荐

  1. UVa156

    #include <bits/stdc++.h> using namespace std; map<string,int> cnt; vector<string> ...

  2. 合适IT人的健身技巧

    合适IT人的健身技巧: 健身益寿生活十条 虽然遗传学家说人的平均寿命可长达120岁,但本世纪人的寿命远远达不到这个数字^有鉴于此,国外一批医生.心理学家和营养学家制定了健身益寿生活10条准则,认为如能 ...

  3. 图解Go的channel底层原理

    废话不多说,直奔主题. channel的整体结构图 简单说明: buf是有缓冲的channel所特有的结构,用来存储缓存数据.是个循环链表 sendx和recvx用于记录buf这个循环链表中的发送或者 ...

  4. centos7.5 安装mysql8.0

    把这个rpm文件下载下来放到服务器上,或者在linux系统中通过wget命令下载 wget http://dev.mysql.com/get/mysql80-community-release-el7 ...

  5. API setContentType(MIME) 参数说明

    HttpServletResponse的setContentType(MIME) API主要用以告诉浏览器服务器所传递的数据类型或服务器希望浏览器以何种方式解析和展示这些数据 其由两部分构成,如:te ...

  6. 在datasnap 中使用unidac 访问数据（客户端）

    前面我们讲了如何使用unidac 在datasnap 的服务端访问数据库,今天大概讲一下客户端如何访问 前面做的服务器?其实这个客户端适合任何datasnap 服务端. 首先我们建一个应用,并加入一个 ...

  7. Linux的历史发展及应用

    Linux的基本介绍: Linux的历史: 操作系统,英语Operating System简称为OS.说道操作系统就需要先讲一讲Unix,UNIX操作系统,是一个强大的多用户.多任务操作系统,支持多种 ...

  8. Note | 常用指令和教程

    目录 Ubuntu操作系统 基础操作 SSH-ubuntu 登录退出 设置SSH秘钥以免密登录 设置别名以免IP登录 传输文件 设置短密码 驱动问题(循环自登陆,分辨率异常) boot空间不足 Win ...

  9. python之路(八)-迭代器&生成器

    迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大优点是 ...

  10. Forward团队-爬虫豆瓣top250项目-最终程序

    托管平台地址:https://github.com/xyhcq/top250 小组名称:Forward团队 小组成员合照: 程序运行方法: 在python中打开程序并运行:或者直接执行程序即可运行 程 ...