【实例】html5拖拽异步上传文件
发表于2014-10-13 12:37 | 次阅读 | 0条评论 | 作者：siru90
效果：拖入文件到如图区域
上传成功：
HTML：
<div id="box">请拖入上传的文件</div>
JS：
window.onload = function(){
var box = document.getElementById("box");
box.ondragenter = function(e){
e.preventDefault();
}
box.ondragover = function(e){
box.innerHTML = "请松开";
e.preventDefault();
}
box.ondragleave = function(e){
box.innerHTML = "请拖入上传的文件";
e.preventDefault();
}
box.ondrop = function(e){
var file = e.dataTransfer.files[0]; //获取拖入的文件
var formData=new FormData(); //创建一个表单对象
formData.append("uploadFile",file); //uploadFile相当于<input name="uploadFile"/>
var xml=new XMLHttpRequest(); //异步上传，也可以用jquery的方法
xml.open("post","up.php");
xml.send(formData);
e.preventDefault();
}
}
PHP:
<?php
if(is_uploaded_file($_FILES["uploadFile"]["tmp_name"])){
move_uploaded_file($_FILES["uploadFile"]["tmp_name"],"./".$_FILES["uploadFile"]["name"]);
}
?>
注：此源码运行效果需要php运行环境，可以下载wamp，详情请百度
源码下载：
点此下载
