#H5API-jQuery的ajax使用FormData、拖拽文件上传、cookie ##7.1 jQuery的ajax使用FormData 注意：jquery 需要设置process:false, contentType:false；否则直接写data:fd会出错
###例子：jQuery的ajax使用FormData 1.html <body> <form id="myform"> 姓名 <input type="text" name="username"> <button>提交</button> </form> <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script> $("#myform").submit(function(){ // var fd = new FormData($("#myform")[0]) var fd = new FormData(this)
$.ajax({
type:"post",
url:"http://localhost/7.5-07/wangweiwei-6.5/server/post.php",
// data:$("#myform").serialize(),
data:fd,
processData:false,
contentType:false,
success:function(res){
console.log(res)
}
})
return false;
})
</script>
</body>
##7.2 使用原生ajax进行拖拽文件上传并显示进度 2.html <head> <meta charset="UTF-8"> <title>拖拽文件上传</title> <style> #box{ margin:50px auto; padding:10px; width:1200px; min-height: 200px; border:2px solid #ccc; background-color: #eee; } #box.over{ border:2px dotted #ccc; transform: scale(0.9, 0.9); }
#box .item{
position:relative;
margin:5px;
float:left;
}
#box .item img{
width:200px;
}
#box .item .item-progress{
position: absolute;
left:50%;
top:50%;
width:80px;
height:80px;
transform: translate(-50%, -50%);
line-height: 80px;
background-color: rgba(0,0,0,.4);
color:#fff;
border-radius: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
// 拖拽元素 进入目标元素
box.addEventListener("dragenter",function(){
this.classList.add("over")
})
// 拖拽元素 离开目标元素
box.addEventListener("dragleave",function(){
this.classList.remove("over");
})
// 拖拽元素 在目标元素中
box.addEventListener("dragover",function(en){
en.preventDefault(); //阻止默认事件
})
// 拖拽元素 放置在目标元素中
box.addEventListener("drop",function(en){
// 读取文件
[].forEach.call(en.dataTransfer.files,function(file){
// 创建div
var div = document.createElement("div");
div.classList.add("item");
box.appendChild(div);
// 读取图片
readImage(file,div);
// 上传图片
uploadImage(file,div)
})
// 避免把图片在浏览器打开
en.preventDefault();
this.classList.remove("over");
});
// 读取图片
function readImage(file,div){
var fr = new FileReader();
fr.onload = function(){
// 创建img
var img = document.createElement("img");
img.src = fr.result;
div.appendChild(img);
}
fr.readAsDataURL(file);
}
// 上传图片
function uploadImage(file,div){
// 创建FormData
var fd = new FormData();
// 把文件对象添加到FormData中
fd.append("uploadfile",file);
// 显示进度
var itemProgress = document.createElement("div");
itemProgress.classList.add("item-progress");
itemProgress.innerHTML = "0%";
div.appendChild(itemProgress)
// ajax操作
var xhr = new XMLHttpRequest();
xhr.onload = function(){
// 上传结束了 清除上传进度显示
setTimeout(function(){
div.removeChild(itemProgress);
},1000)
}
// 上传进度的事件
xhr.upload.onprogress = function(ev){
itemProgress.innerHTML = Math.round(ev.loaded / ev.total * 100) + "%";
}
// 请求
xhr.open("POST","http://localhost/7.5-07/wangweiwei-6.5/server/upload.php");
// 正式发送
xhr.send(fd);
}
</script>
</body>
##7.3 WEB存储 --HTML5 web 存储,一个比cookie更好的本地存储方式
###1、cookie ####1. 例子：通过其他文件读取cookie 3.hmtl、3s.html、test.html #####3.html代码如下： <body> <!-- 通过访问3s.html可以发现同路径下的文件可以读取到所有cookie --> <a href="3s.html">3s.html</a>
<!-- 通过访问上一目录下的test.html可以发现读取不到username的cookie -->
<a href="../test.html">test.html</a>
<script>
// 设置cookie
document.cookie = "username=123";
document.cookie = "age=100;path=/";
// 设置cookie时间
var date = new Date();
date.setTime(date.getTime() + 1000 * 3600 * 24 * 7);
document.cookie = "grad=H513;path=/;expires=" + date.toUTCString();
console.log(document.cookie);
</script>
</body>
#####3s.html和test.html放入代码如下： <body> <script> console.log(document.cookie) </script> </body>
####2. 例子：读取、设置、删除cookie 4.html、cookie.js #####4.html代码如下： <body> <!-- 引入cookie封装js文件 --> <script src="cookie.js"></script> <script> // 读取cookie console.log(cookie.get("age")); // 返回false，所以没有这个cookie console.log(cookie.get("address")); // 返回上海
// 设置cookie
// cookie.set("address","上海");
// cookie.set("address","beijign","/");
// 设置cookie有效期
var date = new Date();
date.setTime(date.getTime() + 1000 * 3600 * 24 *365);
cookie.set("email","beijing@qq.com","/",date);
// 删除cookie
// cookie.drop("address"); // 删除掉address为上海的cookie
cookie.drop("address","/"); // 删除掉address为beijing的cookie
</script>
</body>
#####cookie.js封装代码如下： var cookie = (function(){ /* * 读取cookie * @param string key */ function get(key){ var cookieArr = document.cookie.split(";"); var res = false; cookieArr.forEach(function(item){ var itemArr = item.split("="); if(itemArr[0] === key){ res = itemArr[1] } });
return res;
}
/**
* 设置cookie
* [@param](https://my.oschina.net/u/2303379) string key 键
* [@param](https://my.oschina.net/u/2303379) string value 值
* [@param](https://my.oschina.net/u/2303379) string path 路径，可选
* @param date expires 有效期，可选
* @param string domain 域名，可选
*/
function set(key,value,path,expires,domain){
var cookieStr = key + "=" + value;
// if(path !== undefined){
if(path){
cookieStr += ";path=" + path;
}
if(expires){
cookieStr += ";expires=" + expires.toUTCString();
}
if(domain){
cookieStr += ";domain=" + domain;
}
document.cookie = cookieStr;
}
/**
* 销毁cookie,一般是通过返回过去的时间来删除cookie
* @param string key
*/
function drop(key,path,domain){
// 获取时间
var date = new Date();
// 返回过去时间
date.setTime(date.getTime() - 1);
set(key,"",path,date,domain);
}
// 返回函数
return {
get:get,
set:set,
drop:drop
}
})()
###2、localStorage 以键值对方式存储
存储期限没有时间限制
###3、sessionStorage 以键值对方式存储
存储期限浏览器关闭
###4、例子：设置localStorage和sessionStorage 5.hmtl <body> <script> // 设置localStorage window.localStorage.username = "老王"; window.localStorage["userage"] = 10; console.log(localStorage);
// 设置sessionStorage
window.sessionStorage.username = "老李";
sessionStorage["age"] = 18;
console.log(sessionStorage);
</script>
</body>
###5、cookie、localStorage和sessionStorage 三者的区别
-
共同点：都是在浏览器端存储的数据，且同源的
-
区别：
-
cookie：
-
cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下
-
存储：在用户本地终端上的数据存储；比较复杂的存储，其本身也是web存储的一种
-
存储大小：cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识
-
保质期：默认当用户关闭浏览器窗口后；或cookie过期时间之前一直有效
-
作用域：在所有同源窗口中都是共享的
-
常用于：第二次访问免登录
-
-
localStorage:
-
存储：以键值对方式存储，相对cookie比较简单的存储
-
存储大小：数据完全存储在客户端，仅在本地保存，不需要通过浏览器的请求将数据传给服务器，因此相比cookie来说能够存储更多的数据
-
保质期：没有时间限制，数据始终有效
-
作用域：在所有同源窗口中都是共享的
-
常用于：购物车
-
-
sessionStorage：
-
存储：以键值对方式存储，相对cookie比较简单的存储
-
保质期：是不能改的，当用户关闭浏览器窗口后，数据会被删除
-
作用域：不在不同的浏览器窗口中共享，即使是同一个页面
-
-
##作业 ###1、cookie js 实现换肤操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换肤操作</title> <link rel="stylesheet" href="" id="mylink"> <style> .icon-list{ position: absolute; right:20px; top:20px; }
ul{
list-style:none;
padding:0;
}
.icon{
width:15px;
height:15px;
float:left;
margin-left:5px;
cursor:pointer;
background-image:url("./theme.gif");
}
#skin_0{
background-position: 0px 0px;
}
#skin_1{
background-position: -20px 0px;
}
#skin_2{
background-position: -40px 0px;
}
#skin_3{
background-position: -60px 0px;
}
#skin_4{
background-position: -80px 0px;
}
#skin_5{
background-position: -100px 0px;
}
#skin_0.active{
background-position: 0px -15px;
}
#skin_1.active{
background-position: -20px -15px;
}
#skin_2.active{
background-position: -40px -15px;
}
#skin_3.active{
background-position: -60px -15px;
}
#skin_4.active{
background-position: -80px -15px;
}
#skin_5.active{
background-position: -100px -15px;
}
</style>
</head>
<body>
<ul class="icon-list">
<li class="icon" id="skin_0"></li>
<li class="icon" id="skin_1"></li>
<li class="icon" id="skin_2"></li>
<li class="icon" id="skin_3"></li>
<li class="icon" id="skin_4"></li>
<li class="icon" id="skin_5"></li>
</ul>
<script src="cookie.js"></script>
<script>
//获取 li的集合
var lis = document.querySelectorAll(".icon");
//从cookie中取出 值
var skinName = cookie.get("skinName") ? cookie.get("skinName") : "skin_0";
//控制按钮 对号
document.getElementById(skinName).classList.add("active");
//加载想赢的css
document.querySelector("#mylink").href = "./css/"+skinName+".css";
//循环 绑定单击事件
for (var i = 0; i < lis.length; i ++) {
lis[i].addEventListener("click", function(){
//其他li 去掉 active 类
for (var j = 0; j < lis.length; j ++) {
lis[j].classList.remove("active");
}
//当前的li 添加 active 类
this.classList.add("active");
//更换 皮肤 (css)
document.querySelector("#mylink").href = "./css/"+this.id+".css";
//把当前的皮肤加入 cookie
var date = new Date();
date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
cookie.set("skinName", this.id, "/", date);
})
}
</script>
</body>
</html>
扫一扫
321
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
