HTML5 拖拉上传文件

必须懂得的基础：

拖拽事件：

拖动区事件：

dragstart：开始拖动时，触发 dragend：停止拖动时，触发 drag：鼠标拖动过程中触发

投放区事件：

dragenter：拖动区进入投放区触发 dragleave：拖动区离开投放区触发 dragover：拖动区在投放区移动时触发 drop：拖动区在投放区放下时，触发

note：可能受默认事件影响，方法可能不灵敏（此处用词不好，但是便于理解），所以应调用event.preventDefault()方法

FormData：

代表一个表单对象，可以通过append('xx', xxx) 往函数里面添加参数，但是xx必须为字符串形式，xxx可以为字符串型，可以是一个二进制文件，也可是File类型的文件

DataTrasnfer:

拖拽物体（文件、图片等）用来进行信息传输的媒介，在拖拽事件中通过event.dataTransfer获取

属性和方法：

1.types 返回数据的格式

2.getData("xxx") 根据xxx获取对象

3.setData("xxx","xxxx") 通过键值对的方式，设置信息（信息此处不恰当，但是便于理解）

4.clearData('xxx') 根据xxx清楚信息

5.files 返回已经投放的文件的信息数组

name：文件名称

type：文件类型

size：文件大小

XMLHttpRequest：这里是新版的

XMLHttpRequest可以向不同域名的服务器发出HTTP请求。这叫做 “跨域资源共享”（Cross-origin resource sharing，简称CORS）。

浏览器有个著名的同源策略，这里浏览器安全的基础，CORS 除了需要浏览器支持外，还要服务器同意。

XMLHttpRequest 支持直接发送FormData，就像浏览器进行表单提交一样。

XMLHttpRequest 还支持进度信息（progress事件），进度分为上传进度和下载进度，上传进度的事件是在XMLHttpRequest.upload 对象上，下载进度的事件是在 XMLHttpRequest 对象。每个进度事件都有三个属性：

lengthComputable：可计算的已上传字节数
total：总的字节数
loaded：到目前为止上传的字节数

除了进度事件，还支持下面五个事件：

load事件：传输成功完成。
abort事件：传输被用户取消。
error事件：传输中出现错误。
loadstart事件：传输开始。
loadend事件：传输结束，但是不知道成功还是失败。

同 progress事件一样，属于上传操作的事件处理函数绑定在XMLHttpRequest.upload对象上，属性下载的直接绑定在 XMLHttpRequest 对象。

示例

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			div {
				width:200px;
				height:200px;
				border:1px dotted red;
				text-align:center;
				line-height:150px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function() {
				var img1 = document.getElementsByTagName("img")[0];
				var div1 = document.getElementsByTagName("div")[0];
				img1.ondragstart = function() {

				}
				img1.ondragend = function() {

				}
				img1.ondrag = function() {

				}
				div1.ondragenter = function(event) {
					event.preventDefault();
					div1.innerHTML = "请松开手";
				}
				div1.ondragleave = function(event) {
					event.preventDefault();
				}
				div1.ondragover = function(event) {
					event.preventDefault();
				}
				div1.ondrop = function(event) {
					event.preventDefault();
					//拖入的文件必须是外部的，不能使浏览器内的
					var files = event.dataTransfer.files[0];

					var formData = new FormData();
					formData.append("aa", files);
					var xml = new XMLHttpRequest();
					xml.open("post","xxxx");  //xxxx为访问上传文件路径
					xml.send(formData);
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			拖入上传
		</div>
		<img src="1.png" draggable=true />
	</body>
</html>