首先uploadify插件的官網爲http://www.uploadify.com/
效果特別好看，而且可以選擇性的配置，重點是上傳實現異步上傳。以前在java項目中用過，
今天結合express用了下。下面爲部分說明
首先用
app.use(express.bodyParser({ keepExtensions: true, uploadDir:__dirname+'/public/upload/' }));
代替app.js中的app.use(express.bodyParser());
這裏設置路徑爲public下的自己創建的文件夾upload。當做文件存儲目錄
下面爲routes下的index.js的路由配置:
var assert= require('assert')
,constant=require('./util/Constant');
exports.upload = function(req, res){
//var name=req.body.userid;
var fileDesc=req.files;
var imgname=fileDesc.Filedata.name;
var path=fileDesc.Filedata.path;
var index=path.indexOf(constant.uploadFile);
var name=path.substring(index);
var imgurl=constant.DomainUrl+":"+constant.DomainPort+"/"+name;
console.log(imgurl);
res.send(imgurl);
};
下面是執行主函數js的配置
$(function() {
$('#file_upload').uploadify({
'swf' : '/images/uploadify.swf',
'formData':{
'userid':'用戶id',
'username':'用戶名',
'rnd':'加密密文'
},
'cancelImg ':'/images/uploadify-cancel.png',
'fileTypeExts' : '*.gif; *.jpg; *.png',
'simUploadLimit ':'2',
'uploader' : '/fileupload',
'onUploadSuccess' : function(file, data, response) {
// alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
var img="<img src=\""+data+"\"/>";
$("#img_box").append(img);
}
});
});
然後是html頁面的配置
<!DOCTYPE html>
<html>
<head>
<title>My Uploadify Implementation</title>
<link rel="stylesheet" type="text/css" href="/stylesheets/uploadify.css">
<style type="text/css">
.input_frame{
height: 70px;
}
.img{
width: 550px;
position: absolute;
margin-top: 50px;
}
.img img{
width: 100px;
height: 100px;
margin-left: 10px;
z-index: -99;
}
</style>
</head>
<body>
<div class="input_frame">
<input type="file" name="file_upload" id="file_upload" />
</div>
<div id="img_box" class="img"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="/javascripts/test.js">
</script>
</body>
</html>
ps:排版真的爛透了。