H5API-百度地图API、文件上传、XMLHttpRequest

最新推荐文章于 2021-11-29 11:55:10 发布

chouwu3732

最新推荐文章于 2021-11-29 11:55:10 发布

阅读量241

点赞数

文章标签： javascript php ViewUI

原文链接：https://my.oschina.net/u/3502365/blog/1154612

版权

#H5API-百度地图API、文件上传、XMLHttpRequest ##6.1 百度地图API ###百度地图APIKey： B8cfd1501ae7f7c55dc3793ee989c354

###例子：百度地图API 结合地理定位 1.html <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图结合地理定位</title> <style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:100%}
</style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=B8cfd1501ae7f7c55dc3793ee989c354"> //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize" </script> </head>
<body> <div id="container"></div> <script type="text/javascript"> // 获取地理定位 navigator.geolocation.getCurrentPosition(function(position){ // 创建地图实例
var map = new BMap.Map("container");

				// 创建点坐标BMap.Point(经度, 纬度)	
				var point = new BMap.Point(position.coords.longitude, position.coords.latitude);

				// 初始化地图，设置中心点坐标和地图级别
				map.centerAndZoom(point, 15);
				
				// 设置地图显示的城市 此项是必须设置的
				// map.setCurrentCity("北京");

				//开启鼠标滚轮缩放
				map.enableScrollWheelZoom(true);     
			},function(error){
				console.log(error)
			},{
				timeout:10000
			})
		</script>
	</body>

##6.2 文件API ###1、文件上传 ####1. multiple 设置给input，实现多文件 ####2. accept 过滤上传文件的类型，accept="image/*"

####3. 例子： 2.html <body> <form> <input type="file" name="pic" multiple accept="image/*"> </form> </body>

###2、FileList 对象

type为file的input元素的属性files 为FileList对象
FileList对象是 File对象组成的集合
类数组对象
获取FileList对象，通过 inputElement.files

###3、File 对象

name 属性文件名
size 属性文件大小
type 属性文件类型
lastModified 属性最后修改时间
lastModifiedDate 属性最后修改时间

###4、例子：File对象和FileList对象 3.hmtl <body> <input type="file" οnchange="getFile(this)" multiple> <div id="box"></div>

		<script>
			function getFile(ele){
				var message = "";

				// 遍历FileList
				[].forEach.call(ele.files,function(file){
					message += "name:" + file.name + "<br>";
					message += "size:" + file.size + "<br>";
					message += "type:" + file.type + "<br>";
					message += "lastModified:" + file.lastModified + "<br>";
					message += "lastModifiedDate:" + file.lastModifiedDate + "<br>";
					message += "<hr>"
				})

				document.getElementById("box").innerHTML = message;
			}
		</script>
	</body>

###5、FileReader 对象 ####1. 构造函数

FileReader()

####2. 属性

result 结果
readyState

####3. 方法

abort() 中断
readAsDataURL(file) 读取为base64
readAsText(file) 读取为文本

####4. 事件

onload 读取成功后触发
onabort 中断时触发
onerror 读取错误时触发
loadstart 开始读取时触发
loadend 读取结束时触发（不论成功/失败）
progress 在读取过程中触发

####5. 例子：读取文件，并显示内容 4.html <body> <input type="file" οnchange="readFile(this)"> <div id="box"></div> <script> function readFile(ele){ // 获取file对象 var file = ele.files[0];

					if(file.type.match(/^image\/.+$/)){
						readImage(file);
					}else if(file.type.match(/^text\/.+$/)){
						readText(file);
					}else{
						console.log("该类型无法读取")
					}
				}

				// 读取图片
				function readImage(file){
					var fr = new FileReader();
					fr.onload = function(){
						var img = document.createElement("img");
						img.src = fr.result;
						img.width = 200;
						document.getElementById("box").appendChild(img);
					}
					fr.readAsDataURL(file);
				}

				// 读取文本
				function readText(file){
					var fr = new FileReader();
					fr.onload = function(){
						var pre = document.createElement("pre");
						pre.innerHTML = fr.result;
						document.getElementById("box").appendChild(pre);
					}
					fr.readAsText(file);
				}
			</script>
		</body>

###6、文件上传结合拖放 5.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 img{
				margin:5px;
			}
		</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){
					readImage(file,box);
				})

				// 避免把图片在浏览器中打开
				en.preventDefault();

				this.classList.remove("over");
			})

			// 读取图片
			function readImage(file,container){
				var fr = new FileReader();
				fr.onload = function(){
					var img = document.createElement("img");
					img.src = fr.result;
					img.width = 200;
					container.appendChild(img);
				}
				fr.readAsDataURL(file);
			}
		</script>
	</body>

###7、FormData ####1. 构造函数

FormData([formElement]) 获取键值对

####2. 方法

append(key, value) 添加键和值
delete(key) 删除键和值
set(key, value) 设置键和值
get(key) 获取键名
keys() 所有的键名
....

6.3 XMLHttpRequest Level 2

XMLHttpRequest Level 2添加了一个新的接口FormData，利用FormData对象，我们可以通过JavaScript用一些键值对来模拟一系列表单控件，我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单"。比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件

###1、老版本的缺点：

只支持文本数据的传送，无法用来读取和上传二进制文件
传送和接收数据时，没有进度信息，只能提示有没有完成
受到"同域限制"（Same Origin Policy），只能向同一域名的服务器请求数据

###2、新版本的功能：

可以设置 HTTP 请求的时限
可以使用 FormData 对象管理表单数据
可以上传文件
可以请求不同域名下的数据（跨域请求）
可以获取服务器端的二进制数据
可以获得数据传输的进度信息

###3、属性

responseText 服务器返回的文本数据
responseXML 服务器返回的 XML 格式的数据
readyState XMLHttpRequest 对象的状态，等于 4 表示数据已经接收完毕
- 0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法
- 1 (载入)：已经调用open() 方法，但尚未发送请求
- 2 (载入完成)：请求已经发送完成
- 3 (交互)：可以接收到部分响应数据
- 4 (完成)：已经接收到了全部数据，并且连接已经关闭
status 服务器返回的状态码，等于 200 表示一切正常
- 1×× 保留
- 2×× 表示请求成功地接收
- 3×× 为完成请求客户需进一步细化请求
- 4×× 客户端错误
- 5×× 服务器错误
  - 200 响应成功
  - 304 重定向缓存
  - 403 没有权限
  - 404 文件没有找到
  - 503 服务器宕机
  - 504 网关超时
statusText 服务器返回的状态文本
timeout HTTP 请求的时限（超时时间）

###4、方法

open() 请求方式
send() 发送请求
abort() 请求中断

###5、事件

readstatechange
error 新增请求失败触发
timeout 新增请求超时时触发
abort 新增请求中断时触发
load 新增请求成功时触发
loadstart 新增请求开始时触发
loadend 新增请求结束时触发，不论成功/失败
progress 新增请求响应过程中，多次触发

###6、ProgressEvent

total 下载的总数
loaded 当前下载的数

###7、XMLHttpRequestUpload 专门用于上传文件监测文件上传的过程

事件
- load 传输成功完成
- loadstart 传输开始
- loadend 传输结束，但是不知道成功还是失败
- timeout 超时时间
- abort 传输被用户取消
- error 传输中出现错误
- progress 返回进度信息

###8、例子：FormData 结合 XMLHttpRequest Level 2 6.html <body> <form οnsubmit="return submitData()" id="myform"> <table> <tr> <td>姓名：</td> <td><input type="text" name="name" id=""></td> </tr> <tr> <td>年龄</td> <td><input type="text" name="age" id=""></td> </tr> <tr> <td>头像</td> <td><input type="file" name="avatar" id=""></td> </tr> <tr> <td></td> <td><button>提交</button></td> </tr> </table> </form>

		<script>
			function submitData(){
				// 使用FormData
				var fd = new FormData(document.getElementById("myform"));

				fd.append("grade", "h513");

				console.log(fd);

				// 创建 xhr 对象
				var xhr = new XMLHttpRequest();

				// 设置请求超时的时间
				xhr.timeout = 3000;

				// 监听事件
				xhr.onreadystatechange = function(){
					console.log("readystate : "+xhr.readyState);
				}

				// 请求失败触发
				xhr.onerror = function(){
					console.log("error");
				}

				// 请求中断时触发
				xhr.onabort = function(){
					console.log("abort");
				}

				// 请求超时时触发
				xhr.ontimeout = function(){
					console.log("超时");
				}

				// 请求开始时触发
				xhr.onloadstart = function(){
					console.log("loadstart");
				}

				// 请求结束时触发，不论成功/失败
				xhr.onloadend = function(){
					console.log("loadend");
				}

				// 请求成功时触发
				xhr.onload = function(){
					console.log("load");
				}

				// 请求响应过程中，多次触发
				xhr.onprogress = function(en){
					console.log("progress");
					console.log(en);
				}

				// 初始化
				xhr.open("POST", "http://localhost/server/post.php");
				
				// 正式发送
				xhr.send(fd);

				return false;
			}
		</script>
	</body>

###9、例子：下载进度 7.html <body> <button οnclick="load()">加载</button>

		<script>
			function load(){
				// 创建xhr对象
				var xhr = new XMLHttpRequest();

				// 设置请求超时的时间
				xhr.timeout = 3000;

				xhr.onprogress = function(en){
					console.log("已经加载了：" + en.loaded + "/" + en.total);
					console.log(en);
				}

				// 初始化
				xhr.open("GET","http://localhost/server/data.txt");

				// 正式发送
				xhr.send();

				return false;
			}
		</script>
	</body>

###10、例子：FormData 结合 XMLHttpRequestUpload 监测文件上传过程 8.html <body> <form οnsubmit="return submitData()" id="myform"> <table> <tr> <td>头像</td> <td><input type="file" name="avatar" id="" multiple></td> </tr> <tr> <td></td> <td><button>提交</button></td> </tr> </table> </form>

		<script>
			function submitData(){
				// 使用FormData
				var fd = new FormData(document.getElementById("myform"));

				fd.append("grade","h513");

				console.log(fd);

				// 创建xhr对象
				var xhr = new XMLHttpRequest();

				// 设置请求超时的时间
				xhr.timeout = 3000;

				// 监测文件上传过程 XMLHttpRequestUpload
				xhr.upload.onprogress = function(en){
					console.log("上传：" + en.loaded + "" + en.total);
				}

				// 初始化
				xhr.open("POST","http://localhost/server/upload.php");

				// 正式发送
				xhr.send(fd);
			}
		</script>
	</body>

##作业 ###1、使用nodejs和图片实时上传

转载于:https://my.oschina.net/u/3502365/blog/1154612