<!DOCTYPE html> <html lang="en"> <head> <title>Title Page</title> <meta charset="UTF-8"> <meta name=description content=""> <meta name=viewport content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="loves"></div> <input type="button" id="upload" value="submit"> <progress max=100 min=0 value=0></progress> <script> document.addEventListener('drop', prevent); document.addEventListener('drop', fileHunter); document.addEventListener('dragenter', prevent); document.addEventListener('dragleave', prevent); document.addEventListener('dragover', prevent); var tmp = null; function prevent(e){ e.stopPropagation(); e.preventDefault(); } function fileHunter(e){ var reader = new FileReader(); var images = e.dataTransfer.files; tmp = images[0]; reader.readAsDataURL(images[0]); reader.addEventListener('load',function(e){ var img = document.createElement('img'); img.src = reader.result; document.querySelector('#loves').appendChild(img); }) } function uploadFile(){ var form = new FormData(); form.append(tmp.name,tmp); var xhr = new XMLHttpRequest(); xhr.open('POST','http://127.0.0.1:1337/upload',true); var progress = document.querySelector('progress'); xhr.addEventListener('progress',function(e){ if(e.lengthComputable){ progress.value = Math.round((e.loaded/e.total)*100); } }); xhr.addEventListener('load',function(e){ console.log(this.response); }) xhr.send(form); } document.querySelector('#upload').addEventListener('click',uploadFile); </script> </body> </html>
这里代码基本完成要求,说明以下:javascript
- 拖动添加,须要阻止默认行为,不然浏览器会尝试打开文件。若是是拖动事件,经过
e.dataTransfer.files
获取文件列表,若是经过<input type="file" multiple>
须要监听change
事件,经过e.target.files
获取文件列表。- 文件预览 FileReader不知道是否是HTML5标准,可是现代浏览器基本上都支持,并且须要浏览器支持
data-url schema
,firefox跟chrome提供的快捷方法window.URL.createObjectURL()
,window.webkitURL.createObjectURL()
返回的是一个blob:***
的二进制流,也是能够用的,但不清楚原理。- 文件上传进度监控,XHR2提供
progress
事件用于检测上传状态,两个属性e.total
,e.loaded
总大小和已上传大小。
function shortcut(e){ var images = e.dataTransfer.files; var img = document.createElement('img'); img.src = window.webkitURL.createObjectURL(images[0]); document.querySelector('#loves').appendChild(img); }
后台使用nodejs Express框架编写html
/** * Created by Administrator on 14-2-5. */ var express =require('express'); var app = express(); app.post('/upload', express.bodyParser({ keepExtensions: true, uploadDir: __dirname + '/static/upload' }), uploadSolve); app.use(app.router); app.use(express.static(__dirname + '/static')); app.listen(1337); function uploadSolve(req,res,next){ res.status(200); }
没有任何安全防御的操做,仅基础的文件保存功能。java