H 5ドラッグファイルアップロード例
1482 ワード
H 5のドラッグイベントを利用して、フォームを使わずに非同期ファイルのアップロードを完了することができます.サンプルコードは以下の通りです.
<!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><?php
move_uploaded_file($_FILES['upfile']['tmp_name'], 'test.js');
?>