存储

实现内容的永久保存（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. Linux permission denied问题

    初试Linux 本来想试一试递归的mkdir -p结果遇到了permission denied,但是自己明明是管理员啊 查了博客,在文件名前加上chmod 777 ,例如chmod 777  temp ...

  2. mysql安装完启动问题解决

    一.初始化报错问题: 1./usr/local/mysql/bin/mysqld --user=mysql --basedir=/usr/local/mysql --datadir=/usr/loca ...

  3. out与ref以及可空类型用法的用法

    1.ref的用法:传递结构 public class A { public int X{get;set;} } public static void changeA(ref A a) { a.X=2 ...

  4. python3 tkinter添加图片和文本

    在前面一篇文章基础上,使用tkinter添加图片和文本.在开始之前,我们需要安装Pillow图片库. 一.Pillow的安装 1.方法一:需要下载exe文件,根据下面图片下载和安装       下载完 ...

  5. MySQL中的latch(闩锁)详解——易产生的问题以及原因分析

    Latch 什么是latch: 锁是数据库系统区别与文件系统的一个关键特性.锁机制用于管理对共享资源的并发访问.Innodb存储引擎在行级别上对表数据上锁,这固然不错.但是Innodb也会在多个地方使 ...

  6. tensorflow学习之（九）classification 分类问题之分类手写数字0-9

    #classification 分类问题 #例子 分类手写数字0-9 import tensorflow as tf from tensorflow.examples.tutorials.mnist ...

  7. jquery 3.4.0

    jQuery 3.4.0 的更新内容主要是错误修复和功能改进,列举部分如下: 针对 .width 和 .height 的性能改进 支持 nonce 和 nomodule 针对 Radio 元素新增事件 ...

  8. oracle存储过程 out cursor

    create or replace procedure BUILDEMPLID(emp_cursor out sys_refcursor) is n_emplid number; n_emplid1 ...

  9. WindowsPE权威指南 第二章 小工具 pedump代码的C语言实现

    2016-11-16 16:29:07 主程序代码 pedump.c #include <windows.h> #include <Richedit.h> #include & ...

  10. 编写shell脚本kill掉占用cpu超过90%以上的程序

    由于集群用户经常会不懂如何提交作业,将作业直接运行到登录节点上,这样导致登录节点的cpu及内存占用很大,导致其他用户甚至无法登录.所以就想到了一种解决方法,写一个shell脚本,常驻登录节点,监控cp ...