文档章节

H5API-jQuery的ajax使用FormData、拖拽文件上传、cookie

wei0925
 wei0925
发布于 2017/07/06 15:13
字数 1695
阅读 19
收藏 0

#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>

© 著作权归作者所有

wei0925
粉丝 2
博文 15
码字总数 17278
作品 0
温州
程序员
私信 提问
7款基于JavaScript和AJAX的文件上传插件

本文整理了7款基于JavaScript和AJAX的文件上传插件,这些插件基本上都能实现以下功能: 多文件上传 拖拽操作 实时上传进度 自定义上传限制 希望能为你的开发工作带来帮助。 1. jQuery File U...

EDIAGD
2013/09/23
283
0
分享10个使用简单的jQuery的拖放插件(drag and drop plugin)

日期:2012-4-20 来源:GBin1.com 在这篇文章中,我们将给大家介绍10个使用简单的拖放插件,能够方便快捷的帮助你添加拖放功能到你的网站。谢谢! Drag n Drop Scattered Gallery 支持不同外...

gbin1
2012/04/24
333
0
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.8K
1
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
67
0
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用

日期:2011/11/19 来源:GBin1.com 昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader ,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式...

gbin1
2011/11/19
323
1

没有更多内容

加载失败,请刷新页面

加载更多

thinkcmf 渗透测试漏洞修复解决方案

近段时间发现很多APP程序用的是thinkcmf,此程序源码存在getshell漏洞,我们Sine安全紧急对此高危漏洞进行了分析和漏洞修复,攻击者可以通过构造特定的请求包get请求即可在远程服务器上执行任意...

网站安全
28分钟前
6
0
MySQL的IP地址与数字互转原理

一、inet_aton与inet_ntoa inet_aton是把ip地址转为数字的函数,记忆小技巧,inet表示网络相关,在c语言中a习惯性代表字符串,to就是转换的,n代表数字,aton就是字符串转数字,同理inet_nt...

trayvon
39分钟前
6
0
【翻译】全新16英寸MacBook Pro评测:开发人员的梦想成真

要问现在适合开发者用的笔记本,市面上还是有很多选择的,比如Dell的XPS系列,外星人系列(游戏也是杠杠滴),联想拯救者系列,还有形形色色的高配机型,价格也从几千到几万不等。 但是,笔吧...

Dimple91
41分钟前
8
0
IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲...

老码农的一亩三分地
57分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部