|
首先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:排版真的烂透了。 | 
转播
