2015年9月17日 星期四
drag and drop html
http://hmkcode.com/java-servlet-jquery-file-upload/
http://www.java2s.com/Code/Jar/j/Downloadjavaxservlet30jar.htm
http://html5demos.com/dnd-upload
http://jsfiddle.net/danielzen/utp7j/
https://www.youtube.com/watch?v=hqSlVvKvvjQ
/******************************************************************/
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Drag & Drop Uploading </title>
<link rel="stylesheet" href="global.css">
</head>
<body>
<div id='uploads'><div>
<div class='dropzone' id='dropzone'>Drop files here to upload</div>
<script>
(function (){var dropzone=document.getElementById('dropzone');
var upload=function(files){
//console.log(files);
var formData=new FormData();
xhr=new XMLHttpRequest(),x;
for (x=0;x<files.length;x=x+1){
formData.append('file[]',files[x]);
}
xhr.onload=function(){
var data=this.responseText;
console.log(data);
}
xhr.open('post','upload.php')
xhr.send(formData);
}
dropzone.ondrop=function(e){
e.preventDefault();
this.className='dropzone';
console.log(e.dataTransfer.files);
var files = e.target.files || e.dataTransfer.files;
for (var i = 0, file; file = files[i]; i++) {
alert(file.webkitRelativePath+' '+file.name);
}
//alert(e.dataTransfer.files);
//upload(e.dataTransfer.files);
}
dropzone.ondragover=function(){
this.className='dropzone dragover';
return false;
}
dropzone.ondragleave=function(){
this.className='dropzone';
return false;
}
}())
</script>
</body>
</html>
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言