国庆节对于一个大三党来说是一整块难得的时间，出去玩也好，做其他的事也好，都可以随心所欲地安排。想着利用这个时间开发 一个社交网站作为学习node的一个总结，不怎么精，也算凑合，无奈还有太多的事儿要做啊。废话不多说，转入正题：

今天遇到图片上传的问题，服务器能成功收到图片信息，但如何将进度返给客户端呢？用 <form method='post' action="" target="hidden- iframe" enctype='multipart/form-data'></form>发送文件是一个post请求，服务器只可能回复一次，而且这个回复主要用来回复前端上传 文件的获取地址，不适合再做他用。

网上查了查，说是可以用flash做，好吧，表示不会flash… 目前主要的问题是如何不断地从服务器获得上传进度，socket貌似能做到这一点，问题是不知道上传结束时客户端如何主动断开socket链接，有知道的朋友麻烦告诉一声^-^，于是决定采用轮询了。 先贴前端部分代码: html部分

      <iframe name="hidden_iframe" id='hidden_iframe' style="display:none" src=""> </iframe>
      <form method='post' action='/uploadimage' enctype='multipart/form-data' target="hidden_iframe">
               <input type="text" name="randomID" id="uploadTag" style="display:none" />
               选择图片：<input type='file' name='img' id='filearea' onchange="setTag()"/>
               <input type='submit' value='提交' onclick=" startRequest()" />
     </form>
     <div id="showbox" ></div>

JS部分

       var uploadTag;
       function startRequest()
       {
             var json={"randomID":uploadTag};
            setTimeout(post_data(obj,'/getuploadprocess',dealResponse),1000);
       }
       function dealResponse(json)
       {
         var box=document.getElementById("showbox");
         box.innerText=json.progress+'%';
         if(json.progress!=100)
         {
           startRequest();
         }
       }   

//上面这俩个function 组成一个不达目的不罢休的轮询,post_data是个ajax，就不贴了

       function setTag()
       {
           uploadTag=Math.ceil(Math.random()*1000000);
           var tag=document.getElementById("uploadTag");
           tag.value=uploadTag;
       }

//设置随机id,避免搞不清是请求哪个文件的进度

       function uploadErr(message)
       {
          alert(message);
       }

//处理错误，当然这里只是简单alert，没有考虑用户体验，就写简单点吧

       function uploadEnd(json)
       {
         var obj=JSON.parse(json)
         alert(obj.message)
       }

//上传结束的callback，返回图片的获取地址，前端应该将其设置成一个img元素的src属性，也从简了:)
** 后端:** 后端大部分人都是使用的express，然后就顺便设置了app.use(multer(dest:""))解析请求，那可就做不了进度条了，建议把这个设置删了，然后 var formidable=require(“formidable”);(写在路由模块里)； 代码：

       var uploadprogress={};//全局变量，存进度
       module.exports=function(app)
       {
       ...........................................................................
       ...........................................................................
         app.post('/uploadimage',function(req,res){
             var id=1;
             var uploadfile;
             var form=new formidable.IncomingForm();//formidable模块的用法自己去github看文档吧
             form.uploadDir='';
             from.keepExtensions=true;
             form.on("field",function(name,value){//设置唯一可标识的id
             id=req.session.user._id+req.body.randomID;//这个value就是表单中文本框的值
       });
             form.on("err",function(err){
               var callback="<script>top.uploadErr('"+err+"');</script>";
                res.end(callback);//这段文本发回前端就会被同名的函数执行
       })
              from.on("progress",function(bytesRecieved,bytesExpected){
                 uploadprogress.id=Math.ceil((bytesRecieved/bytesExpected)*100);//更新进度
              //这里有个id的值是否已经设置的问题，不过没关系，就算仍是最初的1，也只耗一丁点内存
       })
              form.on("abort",function(){
                ............
       })
              form.on("file",function(err,file){
                  if(err)
                 {
                      console.log(err);
                       var callback="<script>top.uploadErr('"+err+"');</script>";
                       res.end(callback);           
                    }
                 uploadfile=file;//记录文件信息
       })
             form.on("end",function(){
                 var file=new File()
                 .......
                 ...... 
                file.save();//将文件信息存入数据库，如果是文章里面的图片的话，就没有必要存了，在前端直接设置src就相当于存了
                var fpath=uploadfile.path;
                var callback="<script>top.uploadEnd('"+fpath+"');</script>";
                res.end(callback);
       })
             form.parse(req);
       })
       
       app.post('/getuploadprocess',function(req,res){
            var id=req.session.user._id+req.body.randomID;
            var pr;
            if(uploadprogress.id)
             {
               pr=uploadprogress.id;
             }
            else
           {
               pr=0;
           }
           if(pr==100)
           {
              delete uploadprogress.id;
           }
             res.status(200).json({"progress":pr});
       })
       }

ok主要的代码已经贴完了，下面来说一下工作的流程，首先由表单提交文件，在确定文件后会自动生成一个随机ID用于标识，这个ID发给后台和user的id组合为文件的标识；后台接受文件上传请求，formidable开始解析文件，主要监听progress事件，由其返回的参数来更新上传进度。在表单点击提交的时候同时触发startRequest函数，向后台获取上传进度，这个请求由/getuploadprogress处理，里面的代码就是简单的响应和清理功能。自此全部结束，前端获得进度后想要以什么方式展现就随看官发挥吧，我就简单展现其百分比了

PS：如果有大神路过，小弟请教一个问题：这个代码 是实现了功能，但获得进度是个长轮询，不知道对服务器来讲压力大不大。。测试时我同时上传俩个400多M的文件，电脑风扇就转个不停。虽然文件上传成功了，但还是担心性能问题（我用本机做的服务器），求大神留下高见！