必须懂得的基础:
拖拽事件:
拖动区事件:
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>