node js 与uploadify插件的简单结合

  

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值