浏览器图片预览

浏览器图片预览

https://www.zybuluo.com/bornkiller/note/5

• 图片拖动添加，实时预览以下代码就可以实现。FileReader接口提供了标准方法，chrome浏览器有快捷方法。

这里代码基本完成要求，说明如下：

• 拖动添加，需要阻止默认行为，否则浏览器会尝试打开文件。如果是拖动事件，通过e.dataTransfer.files获取文件列表，如果通过需要监听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);
}

没有任何安全防护的操作，仅基础的文件保存功能。

疑问请联系QQ:491229492