<!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