利用H5的拖曳事件，可以不用表單就完成異步文件上傳，示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>h5拖拽異步上傳</title>
</head>
<style>
#uuz{
width: 200px;
height: 200px;
border: 1px dashed orange;
text-align: center;
}
</style>
<body>
<div id="uuz">
</div>
</body>
<script>
window.onload = function(){
var uuz = document.getElementById('uuz');
uuz.ondragenter = function(e){
e.preventDefault();
}
uuz.ondragover = function(e){
e.preventDefault();
this.innerHTML = '請松開';
}
uuz.ondragleave = function(e){
e.preventDefault();
this.innerHTML = '請拖入要上傳的文件';
}
uuz.ondrop = function(e){
e.preventDefault();
var upfile = e.dataTransfer.files[0]; //獲取要上傳的文件對象(可以上傳多個)
var formdata = new FormData();
var xhr = new XMLHttpRequest();
formdata.append('upfile', upfile); //設置服務器端接收的name為upfile
xhr.open('post','1.php'); //以post方式發送到1.php
xhr.onreadystatechange = function(){
if(this.status==200){ //上傳成功
alert('上傳成功');
}else{
alert('上傳失敗~');
}
}
xhr.send(formdata);
}
}
</script>
</html>
1.php：
<?php
move_uploaded_file($_FILES['upfile']['tmp_name'], 'test.js');
?>
