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 ...
随机推荐
- PHP 使用数字作为SESSION的Key，一刷新页面session丢失，Session消失，无法存储
PHP 使用数字作为SESSION的Key,一刷新页面session丢失,Session消失,无法存储 项目中有用到md5截取做session key值的,有些md5截取出来的部分是纯数字的,导致部分 ...
- Chapter6_访问权限控制_访问权限修饰词
Java中有四种访问权限,public,private,protected和包访问权限,它们是置于类中每一个成员之前的定义,无论是一个域还是一个方法,下面一一介绍. 一.包访问权限 如果不提供任何访问 ...
- [少数派]如何学习Git
用玩游戏的方式学习 Git 目录 为什么要学习 Git 怎么学习 Git Learn Git Branching 其他学习资源 用游戏的方式来学习,是一种有趣而高效的方式. 从刚接触电脑时的打字练习软 ...
- 【竞价网站绝技】根据访客ip，页面显示访客所属城市的html代码（借用YY IP地址库）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Spring Boot中使用Lombok消除POJO类模板代码
首先,要让IDE支持Lombok,这里以idea为例进行介绍. 点击项目的“File”-—>"settings"—>"Plugins",在marke ...
- 83、源代码管理工具(Git)
一.简介 git是一款开源的分布式版本控制工具 在世界上所有的分布式版本控制工具中,git是最快.最简单.最流行的 git起源 作者是Linux之父:Linus Benedict Torvalds 当 ...
- Fiddler抓包工具安装与使用
1.Fiddler简介2.Fiddler安装步骤3.Fiddler目录结构4.Fiddler证书配置5.Fiddler录制配置6.Fiddler工作原理7.Fiddler界面详解 1.Fiddler简 ...
- shell awk处理过滤100万条数据
背景: 100万条数据.格式如下: ID 地址 1895756546931805 安徽省六安市裕安区固镇镇佛俺村柳树队5758 安徽省蒙城县岳坊镇胡寨村小组小胡寨庄6号 183494167409969 ...
- 《Serverless架构-无服务单页应用开发》读后感
本书的作者是[美]Ben Rady,译者郑赞美.简传挺,书中作者详细的介绍了如何使用html.js以及amazon提供的诸多云服务(Simple Storage Service(S3).Cognito ...
- Vue.js——快速入门
Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...