存储

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

保存：

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

获取：

 //判断是否有内容

 if(localStorage.自定义键名){

     //显示内容

     alert(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);

 }

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. Handler processing failed; nested exception is java.lang.NoSuchMethodError: org.apache.commons.codec.digest.DigestUtils.sha1Hex(Ljava/lang/String;)Ljava/lang/String;

    异常:Handler processing failed; nested exception is java.lang.NoSuchMethodError: org.apache.commons.co ...

  2. 第一二次java实训作业

    1. 声明一个整型变量a,并赋初值5,在程序中判断a是奇数还是偶数,然后输出判断的结果. package java1; public class java1 { static int a=5; pub ...

  3. 基于xposed实现android注册系统服务，解决跨进程共享数据问题

    昨花了点时间,参考github issues 总算实现了基于xposed的系统服务注入,本文目的是为了“解决应用之间hook后数据共享,任意app ServiceManager.getService就 ...

  4. LinkedList - 好一个双向链表

    LinkedList是常用的集合结构之一,数据存储结构为链式存储,每个节点都有元素.前指针和后指针,指针指向了前节点和后节点的位置.同是LinkedList也是一个队列,实现了Deque接口,Dequ ...

  5. spring+struts+hibernate整合

    spring整合: 1:添加配置文件和相应的spring jar包(记得一定要加上commons-logging的jar包,有坑****) 2:创建date对象,如果成功则spring的环境ok

  6. SQL: Cannot create JDBC driver of class '' for connect URL

    使用数据库数据源的web 项目,发布后,访问数据库500报错: 浏览器端: 控制台: 数据库连接池在不启动Tomcat的情况下,测试类通过,没有问题. 一旦在服务器发布,就会出现问题,考虑是Tomca ...

  7. Data_Structure01-绪论

    ---恢复内容开始--- 一.作业题目 仿照三元组或复数的抽象数据类型写出有理数抽象数据类型的描述 (有理数是其分子.分母均为整数且分母不为零的分数).有理数基本运算: 构造有理数T,元素e1,e2分 ...

  8. H5canvas画类似心电图

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像,我们可以使用canvas来绘制类似心电图的东西. 效果图如下: <!DOCTYPE html> <ht ...

  9. ubuntu18.04时区设置

    1.运行命令 sudo tzselect 2.选择大区 选择亚洲Asia,继续选择中国China,最后选择北京Beijing 3.建立软链 ln -sf /usr/share/zoneinfo/Asi ...

  10. css样式表的知识点总结

    css总的来说有三种css样式可供选择: 1,行内样式表 行内样式表,直接写在了html文件的元素中,例如: <div style="color:red;"></ ...