浏览器图片预览
https://www.zybuluo.com/bornkiller/note/5
- 图片拖动增加，及时预览以下代码就能够完成。FileReader接口供应了规范要领，chrome浏览器有快速要领。
<!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>
这里代码基本完成请求，申明以下：
- 拖动增加，须要阻挠默许行动，不然浏览器会尝试翻开文件。假如是拖动事宜，经由过程
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框架编写
/**
* 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);
}
没有任何平安防护的操纵，仅基本的文件保留功用。
