# FormData
let fd = new FormData()
fd.set("a","199");
fd.set("a","200");
fd.append("a","2020");
fd.append("b",`sss`);
console.log(fd.get("b"))//sss
fd.delete("b");
console.log(fd.get("b"))//null
console.log(fd.has("a"))//true
console.log(fd)
console.log(fd.get("a"))//200
console.log(fd.getAll("a"))//["200", "2020"]
- FormData对象可使用set设置值，如果同名会覆盖;包括append先添加的key
- 使用append添加则不会覆盖
- delete删除key
- has判断存在与否
- get查看第一个同名的值，
- getAll查看同名的值得数组!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {
width:400px;
height:150px;
border:1px solid black;
background:#CCC;
position: absolute;
margin-left: -200px;
margin-top: -75px;
left:50%;
top:50%;
text-align:center;
line-height:150px;
}
</style>
<script>
window.onload=function (){
let oBox=document.querySelector('.box');
oBox.ondragenter=function (){
oBox.innerHTML='松手上传';
};
oBox.ondragleave=function (){
oBox.innerHTML='请拖到这里';
};
oBox.ondragover=function (){ //只要鼠标还没松手、并且还没离开，一直不停发生
console.log("aaaa");
//ondragover不阻止默认事件，ondrop不会触发
return false;
};
oBox.ondrop=function (ev){
//alert('松手');
let data=new FormData();
console.log(ev)
console.log(ev.dataTransfer)
console.log(ev.dataTransfer.files)
Array.from(ev.dataTransfer.files).forEach(file=>{
data.append('f1', file);
});
//
let oAjax=new XMLHttpRequest();
//POST
oAjax.open('POST', `http://localhost:8080/api`, true);
oAjax.send(data);
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
alert('上传成功');
}else{
alert('上传失败');
}
}
};
return false;
};
};
</script>
</head>
<body>
<div class="box">
请拖到这里
</div>
</body>
</html>