分享一个node结合uploadify的异步上传例子。
发布于 11 年前 作者 fyddaben 7774 次浏览 最后一次编辑是 8 年前

服务器端配置: app.js==> app.use(express.bodyParser({ keepExtensions: true, uploadDir: __dirname + '/public/upload'})); index.js==>

`exports.upload = function(req, res){

     var fileDesc=req.files;

 var imgname=fileDesc.Filedata.name;
 
     var path=fileDesc.Filedata.path;//这里是本地路径D://upload/..jpg
 
     var index=path.indexOf(constant.uploadFile);//配置的放置文件的文件夹名字
 
     var name=path.substring(index);
 
 var imgurl=constant.DomainUrl+":"+constant.DomainPort+"/"+name;
 
 res.send(imgurl);//返回服务器端地址

};`

前台配置: test.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) {
		          var img="<img src=\""+data+"\"/>";
		        
                              $("#img_box").append(img);
		        }
	});
});

html页面:

<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>

<div class="input_frame">
   <pre><input type="file" name="file_upload" id="file_upload" /></pre>
      </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>
5 回复

楼主代码运行不通啊

路由是exports.upload 但是提交的是 ‘uploader’ : ‘/fileupload’,啊? 这怎么解释的通呢

这是3的代码。。。。。

奥。我的app.js里面配置的上传路径,是fileupload

回到顶部