我试图自己实现这个，我也不想要 Jquery 或任何插件。
我想按照最适合我的方式处理文件上传：
文件结构：
--- /uploads {上传目录}
--- /js/slyupload.js {javascript 文件。}
--- index.php
--- 上传.php
--- styles.css {只是一点样式..}
HTML 代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>my Dzone Upload...</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="uploads"></div>
<div class="dropzone" id="dropzone">Drop files here to upload</div>
<script type="text/javascript" src="js/slyupload.js"></script>
</body>
</html>
然后这是附加的 Javascript 文件:: 'js/slyupload.js'
<!-- begin snippet: -->
<!-- language: lang-js -->
// JavaScript Document
//ondragover, ondragleave...
(function(){
var dropzone = document.getElementById('dropzone');
var intv;
function displayUploads(data){
//console.log(data, data.length);
var uploads = document.getElementById('uploads'),anchor,x;
for(x=0; x < data.length; x++){
//alert(data[x].file);
anchor = document.createElement('a');
anchor.href = data[x].file;
anchor.innerText = data[x].name;
uploads.appendChild(anchor);
}
}
function upload(files){
//console.log(files);
var formData = new FormData(),
xhr = new XMLHttpRequest(), //for ajax calls...
x; //for the loop..
for(x=0;x<files.length; x++){
formData.append('file[]', files[x]);
/*//do this for every file...
xhr = new XMLHttpRequest();
//open... and send individually..
xhr.open('post', 'upload.php');
xhr.send(formData);*/
}
xhr.onload = function(){
var data = JSON.parse(this.responseText); //whatever comes from our php..
//console.log(data);
displayUploads(data);
//clear the interval when upload completes...
clearInterval(intv);
}
xhr.onerror = function(){
console.log(xhr.status);
}
//use this to send all together.. and disable the xhr sending above...
//open... and send individually..
intv = setInterval(updateProgress, 50);
xhr.open('post', 'upload.php');
xhr.send(formData);
//update progress...
/* */
}
function updateProgress(){
console.log('hello');
}
dropzone.ondrop = function(e){
e.preventDefault(); //prevent the default behaviour.. of displaying images when dropped...
this.className = 'dropzone';
//we can now call the uploading...
upload(e.dataTransfer.files); //the event has a data transfer object...
}
dropzone.ondragover = function(){
//console.log('hello');
this.className = 'dropzone dragover';
return false;
}
dropzone.ondragleave = function(){
this.className = 'dropzone';
return false;
}
}(window));
CSS：
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.dropzone{
width:300px;
height:300px;
border:2px dashed #ccc;
color:#ccc;
line-height:300px;
text-align:center;
}
.dropzone.dragover{
border-color:#000;
color:#000;
}