浏览器图片预览
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);
}
没有任何安全防护的操作，仅基础的文件保存功能。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。