Web存储及文件拖拽
存储
实现内容的永久保存(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 ...
随机推荐
- hbase_存储模型
Hbase 是按列存储,所以每个列族存储在一个HDFS文件上. Hbase表中的行是按照rowkey字典序进行排列的,并且表格在行的方向上被分割为多个region(按照行进行分割的) region 是 ...
- 关于微信小程序切换获取不到元素的问题
1.由于公司要实现微信小程序的自动化,所以开始学习python + appium 实现微信小程序自动化.在学习过程中遇到在切换webview后获取不到页面元素的问题,导致无法继续.今天在网上看到一篇关 ...
- (python)编程小练习
1.将一串字符串反向输出,如将"abcd"变成“dcba” str1="abcd" print str1[::-1] 2.判断是否为回文——判断用户输入的字符串 ...
- Mysql 导入导出表结构与数据
1.导出整个数据库 mysqldump -u用户名 -p密码 数据库名 > 导出的文件名 C:\Users\jack> mysqldump -uroot -pmysql account ...
- flink 读取kafka 数据,partition分配
每个并发有个编号,只会读取kafka partition % 总并发数 == 编号 的分区 如: 6 分区, 4个并发 分区: p0 p1 p2 p3 p4 p5 并发: 0 1 2 3 ...
- oracle创建新用户和用户表空间
.首先,创建(新)用户: create user username identified by password; username:新用户名的用户名 password: 新用户的密码 也可以不创建新 ...
- Office Web addin 踩坑计:替换后台网站为MVC框架时遇到的问题
Office Web Addin 模板程序的后台本质上是一个网站,你在调试的时候可以发现它的进程是一个32位的IE进程 所以可以把它替换成Asp.net的网站. 替换方法: 1.点击WordRevie ...
- Exp2 后门原理与实践-------20164325王晓蕊
Exp2 后门原理与实践 任务一:使用netcat获取主机操作Shell,cron启动 1.windows获取linux shell 1.1 ipconfig 查看本机查看以太网适配器(8)的ipv ...
- jdk环境变量的设置
一.jdk下载网址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 二.环境变 ...
- Codeforces Round #425 (Div. 2)
A 题意:给你n根棍子,两个人每次拿m根你,你先拿,如果该谁拿的时候棍子数<m,这人就输,对手就赢,问你第一个拿的人能赢吗 代码: #include<stdio.h>#define ...