node js 与uploadify插件的简单结合

最新推荐文章于 2021-08-05 16:12:34 发布

fyddaben

最新推荐文章于 2021-08-05 16:12:34 发布

阅读量2k

点赞数

分类专栏： nodejs 文章标签： uploadify nodejs

本文链接：https://blog.csdn.net/fyddaben/article/details/8905751

版权

nodejs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

fyddaben

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
node js 与uploadify插件的简单结合

首先uploadify插件的官网为http://www.uploadify.com/ 效果特别好看，而且可以选择性的配置，重点是上传实现异步上传。以前在java项目中用过，今天结合express用了下。下面为部分说明首先用 app.use(express.bodyParser({ keepExte
复制链接

扫一扫