11/6/2016 8:35:35 AM
## 网络状态 ##
1. window.navigator.onLine
- window.navigator.onLine是一个属性,不能实时去监听当前的网络状态
- true 当前是有网的
2. 事件通知机制,当网络发生变化的时候,以事件的实时通知
- 事件 online : 从没有网到有网的状态的变换
window.addEventListener("online",function(){
tips.style.display = "block";
tips.innerHTML="网已连接上O(∩_∩)O~";
});
- 事件 offline: 从有网到没有网触发的事件
window.addEventListener("offline",function(){
tips.style.display="block";
tips.innerHTML="没有网了/(ㄒoㄒ)/~~";
});
## HTML5 地理定位 ##
1. 使用 getCurrentPosition() 方法来获得用户的位置
<script>
/*
判断当前的设备是否支持获取地理位置的对象
成功的回调函数和失败的回调函数
*/
if(window.navigator.geolocation){
window.navigator.geolocation.getCurrentPosition(function(position){
/*
position.coords.longitude 十进制数的经度
position.coords.latitude 十进制数的纬度
*/
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
console.log("您当前的经度为:"+longitude+"---您当前的纬度为:"+latitude);
},function(position){
console.log("获取位置信息失败");
});
}
</script>
## HTML5本地存储 ##
### 本地存储localStorage和sessionStorage ###
#### 基本的操作 ####
1. 设置数据,以键值对的形式进行存储
window.localStorage.setItem("testLS","001");
window.sessionStorage.setItem("testSS","002");
2. 取值数据 根据属性名进行取值属性值
console.log(window.localStorage.getItem("testLS"));//001
console.log(window.sessionStorage.getItem("testSS"));//002
3. 根据存储的下标值进行取值属性名
console.log(window.localStorage.key(0));//testLS
console.log(window.sessionStorage.key(0));//testSS
4. 取值数据的长度 注意:是对取出来的数据进行计算的长度
console.log(window.localStorage.key(0).length);//6
console.log(window.localStorage.getItem("testLS").length);//3
5. 移除指定数据,进行单个的移除
window.localStorage.removeItem("testLS");
window.sessionStorage.removeItem("testSS");
6. 进行移除存储空间下的所有的数据
window.localStorage.clear();
window.sessionStorage.clear();
#### localStorage和sessionStorage相同点和差别 ####
1. 相同点
1. 进行本地应用存储
2. 差异
1. 存储时间
- localStorage 可以进行长期的存储
- sessionStorage关闭当前页面,就找不到了,就是当前的会话周期内有效
- 注意
- file:///G注意: 要在同源路径下,直接通过http下面进行找到
- 代码
window.localStorage.setItem("waxun","289071767");
window.sessionStorage.setItem("kaguo","289071767");、、
2. 共享检测
1. `localstorage`
1. 可以进行不同窗口的数据共享在第二个窗口中可以进行访问到本地存储,可以进行取值的到
2. `sessionStorage`
1. 直接设置sessionStorage的值在另一个窗口是拿不到的,不可以进行数据共享
2. 通过a链接可以将本页面的sessionStorage存储的数据共享出去
3. 代码
脚本:window.sessionStorage.setItem("zhuhwkey02","zhuhwval02");
页面结构:<a href="3.3共享检测.html">通过a链接可以将本页面的sessionStorage存储的数据共享出去</a>
3. 本地存储的应用
1. 页面换肤效果
1. 点击之后进行将点击的颜色进行存储到本地
document.body.style.backgroundColor = "skyblue";
window.localStorage.setItem("color","skyblue");
2. 如果有值的话进行直接从本地存储进行取值
if(window.localStorage.getItem("color")){
document.body.style.backgroundColor = window.localStorage.getItem("color");
}
2. 对用户访问页面的次数进行计数
1. 整理自己经常访问的网站进行计数
2. 代码实现
<script>
// pagecount
if(window.localStorage.getItem("pagecount")){
var t = window.localStorage.getItem("pagecount");
//直接进行取值出来的值是字符串,进行转换成number类型之后再进行累加计算
console.log(typeof parseInt(t));
t = parseInt(t);
t=t+1;
window.localStorage.setItem("pagecount",t);
}else{
window.localStorage.setItem("pagecount",1);
}
</script>
#### 本地存储,存储对象的处理 ####
1. 基本数据类型直接进行字符串进行存储,key value的形式进行存储
`window.localStorage.setItem("testLS","001");`
2. 进行存储obj类型的数据,需要进行数据转换
- 代码
var obj = {
"name":"zhuhw",
"qq":"289071767"
};
- 出现的问题
直接进行存储,不转换的情况下,进行存储的数据是
objkey [object Object]
window.localStorage.setItem("objkey",obj);
console.log(window.localStorage.getItem("objkey"));//[object Object]
console.log(typeof window.localStorage.getItem("objkey"));//string
- 以上不是我们想要的数据
- 解决方法
- 进行数据类型的转换
- 存储的时候要将json字符串转换成string类型进行存储JSON.stringify()
- 进行取值的时候,进行转换成json的值 JSON.parse(),是一个object数据,直接可以对其进行对象的取值方式
- 代码
/*
1. 存储的时候要将json字符串转换成string类型进行存储JSON.stringify()
*/
var str = JSON.stringify(obj);
console.log(typeof str);//string
// objkey {"name":"zhuhw","qq":"289071767"} 存储的是json形式的字符串
window.localStorage.setItem("objkey",str);
//进行取值的时候,进行转换成json的值 JSON.parse(),是一个object数据
//直接可以对其进行对象的取值方式
var jsonobj = JSON.parse(window.localStorage.getItem("objkey"));
//zhuhw===289071767
console.log(jsonobj["name"]+"==="+jsonobj["qq"]);
3. 总结
1. 存储数据:obj--->string JSON.stringify(obj)
2. 取值数据: string--->obj JSON.parse("属性名")
## 文件读取 ##
1. 使用文件上传控件
`<input type="file">`
2. 点击按钮进行预览
- `<input type="button" value="文件读取">`
3. 页面样式
<div class="box">
<div class="show-img">
<div class="upload">
<span class="add">添加照片</span>
</div>
</div>
</div>
4. 将读取出来的文件添加到upload里面
1. 新建一个file
`var file = document.querySelector("input[type=file]");`
2. 获取file里面的值
`var data = file.files[0];`
3. 文件里的值需要读取文件的来读取
1. `var fr = new FileReader();`
2. `fr.readAsDataURL(data);`
3. 加载完成,得到result文件流,就是需要的图片的src
fr.addEventListener("load",function(){
var result = fr.result;}
4. 创建img节点,将其追加到upload节点上
var img = document.createElement("img");
img.src = result;
upload.appendChild(img);
## HTML 5 拖放 ##
页面布局
<div class="box" draggable="true"></div>
<div class="target"></div>
### 拖拽对象的事件 ###
1. 拖拽对象的事件
1. 拖拽开始 dragstart
2. 拖拽结束 dratend
3. 拖拽进行中 drag 拖拽着不放会一直触发
2. 代码
var box = document.querySelector(".box");
// 1. 拖拽开始 dragstart
box.addEventListener("dragstart",function(){
box.style.backgroundColor = "green";
});
// 3. 拖拽进行中 drag 拖拽着不放会一直触发
box.addEventListener("drag",function(){
// console.log("正在退拽中...");
})
// 2. 拖拽结束 dratend
box.addEventListener("dragend",function(){
box.style.backgroundColor = "red";
});
### 目标点的事件 ###
1. 目标对象的事件:
1. 进入目标点 dragenter
2. 离开目标点 dragleave
3. 在目标点上dragover
4. 放开目标点drop
2. 目标对象的事件
var target = document.querySelector(".target");
// 1. 进入目标点 dragenter
target.addEventListener("dragenter",function(){
console.log("拖拽对象进入目标点");
});
// 2. 离开目标点 dragleave
target.addEventListener("dragleave",function(){
console.log("拖拽对象离开目标点");
});
// 3. 在目标点上dragover
target.addEventListener("dragover",function(even){
console.log("拖拽对象经过目标点");
//配合drop事件,阻止了浏览器的默认行为,drop事件才会被触发
event.preventDefault();
});
// 4. 放开目标点drop
target.addEventListener("drop",function(even){
console.log("拖拽对象被放开");
//放开拖拽对象的时候,将拖拽对象追加到target上
target.appendChild(box);
even.stopPropagation();
});
3. 补充
最后实现把拖拽的对象目标点为整个文档
-代码
var body = document.body;
body.addEventListener("dragover",function(even){
even.preventDefault();
});
body.addEventListener("drop", function(){
//拖拽到target进行drop的时候,进行冒泡给了父级,所以要给target阻止冒泡事件
body.appendChild(box);
});
## 将外部文件拖拽到窗口中的目标位位置 ##
1. 将html5拖放和文件上传结合思路
1. 直接在外部进行拖拽到本浏览器,会将本页面路径进行覆盖
- 阻止默认事件,文档的,因为是往整个文档里面进行拖拽
- dragover 和 drop事件都要阻止默认的值
2. 目标点进行dragover 和 drop事件,
- 放下的时候,将图片追加到target上面
1. 步骤
1. 找到拖拽的对象
2. 添加到target里面
3. 从事件中找出外部传过来的数据dataTransfer files
4. 代码
<div class="target"></div>
<script>
/*
将html5拖放和文件上传结合
1. 直接在外部进行拖拽到本浏览器,会将本页面路径进行覆盖
- 阻止默认事件,文档的,因为是往整个文档里面进行拖拽
- dragover 和 drop事件都要阻止默认的值
*/
document.addEventListener("dragover",function(event){
event.preventDefault();
});
document.addEventListener("drop",function(event){
event.preventDefault();
});
/*
2. 目标点进行dragover 和 drop事件,
放下的时候,将图片追加到target上面
*/
var target = document.querySelector(".target");
target.addEventListener("dragover", function(event){
event.preventDefault();
});
target.addEventListener("drop", function(event){
/*
1. 找到拖拽的对象
2. 添加到target里面
*/
//从事件中找出外部传过来的数据dataTransfer files
console.log(event);
var file = event.dataTransfer.files[0];
var type = file.type;
console.log(type);//image/ video/
var fr = new FileReader();
console.log(fr);//readAsDataURL()
fr.readAsDataURL(file);//读取出数据流
//进行读取完的时候进行返回一个result
fr.addEventListener("load", function(){
var result = fr.result;
console.log(result);//解析成一串数据,就是我们想要的图片的src
//进行创建dom对象
if(type.indexOf("image/")>-1){
var img = document.createElement("img");
img.src = result;
target.innerHTML = "";
target.appendChild(img);
}else if(type.indexOf("video/")>-1){
var video = document.createElement("video");
video.src = result;
video.setAttribute("autoplay","autoplay");
target.innerHTML = "";
target.appendChild(video);
};
});
});
</script>
11/7/2016 4:32:20 PM
- 浏览: 98870 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
baeiou:
window.addEventListener("o ...
html5本地存储和文件上传 -
masuweng:
很适用,var a = "woai";va ...
js-----比较运算符 -
落叶留步:
3.Detached 内存有,缓存没有,数据库有(但是和 ...
028_CoreAPI_对象三种状态
发表评论
-
js-----比较运算符
2016-07-11 19:16 592<script type="text/jav ... -
sublime封装代码片段
2016-07-11 16:04 9361.sublime中tool---->new snip ... -
Bower包依赖管理
2016-06-17 15:47 664bower包依赖管理 什么是Bower? Bower是 ... -
一段js中涉及的各种js库
2016-06-15 13:11 425http://www.css88.com/doc/unde ... -
Velocity 模板引擎
2016-06-01 22:58 921[转载] http://www.ibm.com/deve ... -
js 正则表达式
2016-05-23 11:29 426转载 http://www.haorooms.com/po ... -
<!DOCTYPE html>很重要 转载的~~
2016-05-23 10:57 1199DOCTYPE的作用和用法 1作用:声明文档的解析类型(d ... -
css hack
2016-05-23 10:42 720css hack是做什么的 解决浏览器兼容性 1. ... -
html+css 小点
2016-03-29 11:39 1304疑问点: <a>标签中href=&q ... -
JavaScript中email.focus()
2016-03-23 15:36 29021.解释email.focus() 百度来的 if (v ... -
javascript中form 中onsubmit为什么会有return
2016-03-23 15:28 1445w3c过来的+百度来的 解释下: for ... -
w3c来的xhtml
2016-03-21 19:05 517XML 是一种标记化语言 ... -
Cookie, LocalStorage、SessionStorage
2016-03-16 14:21 712转载链接: http://jerryzou. ... -
JavaScript复习——02....大致的了解
2015-12-15 10:00 670四、JavaScript 语句 1.JavaScript ... -
JavaScript复习——01....大致的了解
2015-12-15 09:54 815本篇是供自己方便使用 ...
相关推荐
本地图片使用二进制流存储到MySQL中,然后响应前端的传参,查询后可以显示在HEML网页中,相当于图片的简单上传和显示
最近有一项业务需求,就是可以离线存储数据,等到有网络信号的时候可以上传表单和图片。所以研究了一下HTML5的IndexedDB。 对于只存储某些字段的需求来说,可以使用Local Storage和 Session Storage来完成。但是一旦...
利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。Gallery模块管理系统...
17.1 HTML 5增强的文件上传域 573 17.2 ArrayBuffer与TypedArray 578 17.3 Blob类 583 17.4 本章小结 587 第18章 Web Worker多线程API 588 18.1 使用Worker创建多线程 589 18.2 与Worker线程进行数据交换 591...
* 当文件上传时间超过STS过期时间时,SDK内部会定期调用此方法刷新您的STS信息进行后续文件的上传。 * * * 七、可指定上传脚本部署的ECS区域(设置Request的EcsRegionId参数,取值参考存储区域标识:...
针对Web开发人员的有用HTML文件上传提示HTML文件上传提示对Web开发人员的有用HTML文件上传提示。 该存储库包含代码示例,这些代码示例详细说明了提示。 as随着我不断更新源代码,请随时关注此项目。 如果对您有用,...
H5DOS是html5文件系统的文档操作系统。 现在仅Chrome支持。 H5DOS的所有命令都在模仿MS-DOS,例如dir,cd,rd,ren,move等。 由H5DOS创建的文件存储在Chrome的临时存储区中。 它们不会上传到任何服务器。 如果清除...
1、自动同步将WordPress静态文件,比如图片等上传到腾讯云COS存储中,在WP网站中删除图片会自动也删除COS存储文件; 2、可以设置本地与COS同步备份,或者本地不保存,仅存储到COS中(这一点在多个网友版本中均有错误...
将本地图片、视频、音频等文件上传到程序服务器上,再供其他用户浏览或下载。这就造成网站每天都会有大量数据的流入,海量数据带来用户的同时,也带来了一些安全问题。 网站的开发者在网站存储空间中,经常会发现...
本插件的功能界面与DZ自带的flash上传界面几乎完全相同,电脑版和手机触屏版均支持多图上传(实测手机端部分浏览器因不支持文件多选,故无法实现多图上传,包括但不限于手机UC浏览器)。 功能介绍 1、支持HTML5...
此存储库包含用于子域枚举的字词列表,php文件路径,html文件路径和js文件路径 庞大的780万列表,外加用于子域枚举的唯一单词。 非常感谢Emad Shanab的贡献。 我刚刚根据扩展名对单词表进行了分隔,以进行特定的...
2. **文件上传**:用户可以将本地文件上传至服务器,支持大文件的断点续传。 3. **文件下载**:用户可以按需下载服务器上的文件,系统提供多种下载方式。 4. **文件删除**:用户和管理员可以对无用文件进行有效删除...
本地存储教程 构建一个简单HTML页面,该页面将数据存储在localStorage中并从中渲染数据 本教程分为3部分。 没有数据存储创建一个带有一点样式的index.html文件,该文件显示一个用于创建新联系人的表单,一个用于...
同时,文件相关信息通过Web服务器传递到后台数据库中,并通过内联框架子网页的服务端将文件以文件的形式存储到本地项目的指定目录下。根据需要,可查看和删除所选择的文件及相关信息。实际应用表明,该方案操作简便...
此程序所上传的文件存储在云空间外链站,本地空间仅仅只需要1M大小即可 特别注意:涉及到版权问题,此版本不开放文件搜索, 会员系统,以及文件预览,也不开放文件直链,云空间文件仅保存最大120天,最小30天 即...
useLocalStorager 是否启用本地存储 useAsynUploader 是否启用异步上传 二、启动运行项目 1、本项目编译环境,1.6及以上环境,idea 2016.2 2、测试http://localhost:8080/ueditor/jsp/controller.jsp 如果不能正常...
个性化的照片存储引擎,可将图像文件从本地计算机上传和隐藏到统一界面 版本1.3(数据库连接和迁移从版本1.2更新) 该目录结构遵循烧瓶文档,因此不会受到破坏。 驱动程序代码在我的计算机上具有本地路径,因此必须...
1、自动同步将WordPress静态文件,比如图片等上传到腾讯云COS存储中,在WP网站中删除图片会自动也删除COS存储文件; 2、可以设置本地与COS同步备份,或者本地不保存,仅存储到COS中(这一点在多个网友版本中均有...
如果您使用Git,并且需要将文件上传到FTP服务器,则Git-ftp可以通过仅上传自上次上传以来已更改的文件来节省一些时间和带宽。 通过将提交ID存储在服务器上的日志文件中,它可以跟踪上载的文件。 它使用Git来确定...
使用gulp创建了此工具,以自动化开发和构建HTML5标语的过程,并节省了大型广告系列的时间。 该工具是为那些希望通过手工编码横幅来开发横幅的用户而设计的,而不是使用要求使用外部库的不可靠工具或软件。 从初级...