存储
实现内容的永久保存（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存储及文件拖拽的更多相关文章
-
html5 文件拖拽上传
本文首先发表在 码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...
-
VC实现文件拖拽OnDropFiles
文章转自http://blog.csdn.net/zamaolangzi/article/details/5645284 使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了.那么这种功能是 ...
-
C#之winform实现文件拖拽功能
将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了 将一个控件的属性AllowDrop设置为true,然后添加DragDrop.DragEnter ...
-
Linux下安装VMware Tools（使虚拟机支持文件拖拽）
如图点击虚拟机找到安装VMware Tools选项,点击后会在虚拟机桌面显示一个光盘,双击进入如下页面: 选择压缩包将其复制放入Home中不带中文的文件夹: 打开终端,输入cd命令进入文件夹,将压缩包 ...
-
html5 drag 文件拖拽浅淡
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
C# 之文件拖拽和pixturBox缩放与拖拽
文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...
-
php和js实现文件拖拽上传
Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/139 ...
-
wxpython实现文件拖拽
我想让wx.grid里面的单元格能够支持文件拖拽,实现起来挺简单的,共分3步: 1.创建一个wx.FileDropTarget子类的对象,并把要支持拖拽的控件传给它的构造函数,此处是grid 2.调用 ...
-
C#之winform实现文件拖拽功能【转】
将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了 将一个控件的属性AllowDrop设置为true,然后添加DragDrop.DragEnter ...
随机推荐
-
C堆栈入门
原文:http://student.csdn.net/link.php?url=http://www.top-e.org%2Fjiaoshi%2Fhtml%2F427.html 格式和部分内容稍作修改 ...
-
【代码笔记】iOS-使图片两边不拉伸，中间拉伸
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. // ...
-
sdutoj 2623 The number of steps
http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2623 The number of steps ...
-
LeetCode题解-----Maximum Gap
题目描述: Given an unsorted array, find the maximum difference between the successive elements in its so ...
-
CPP变量参数别名
1,变量起"绰号"的操作称为引用(reference),"绰号"称为引用名,申明引用的语法格式; 变量数据类型 &引用名 = 已申明的变量名; 和C中的 ...
-
spring mvc json 返回乱码问题解决(vestion:3.x.x)
本文是转载文章,感觉比较好,如有侵权,请联系本人,我将及时删除. 原文网址:<spring mvc json 返回乱码问题解决(vestion:3.x.x)> 工程中用springmvc返 ...
-
IOS版新闻客户端应用源码项目
IOS版新闻客户端应用源码,这个是一款简单的新闻客户端源码,该应用实现没采用任何第三方类库的 ,并且这个应用的UI做得很不错的,值得我们的参考和学习,希望大家可以更加完善这款新闻类的应用吧. 源码下载 ...
-
vector 对象中存放指针类型数据
<<C++ Primer>> 第四版Exercise Section 5.6 的5.1.6 有一道题是这样的:编写程序定义一个vector对象,其每个元素都是指向string类 ...
-
jQuery基础学习(二)&mdash;jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
-
web端本地与服务端时间校验
当前校验逻辑: 本地和服务端的时间校验绑定在一个通用请求上,这个请求每七分钟会到服务端请求一次,本地拿到服务器时间后,计算请求服务器来回的时间,最后得出与服务器时间的差值,然后每次new Date() ...