[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.replies",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":16},"replies",[35],"user",{"_20":21,"_13":14,"_22":23,"_24":14,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34},"loginname","SenYu","page",1,"limit",50,"total","id","14343","avatar_url","https://avatars.githubusercontent.com/u/5105445?v=3","githubUsername","create_at","2014-10-03 12:56:50.261","score",25,"topic_count",0,"reply_count",5,"is_star",false,{"_20":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":34,"_31":50,"_51":52,"_25":53,"_54":55},"9340","author_id","13547","tab","share","content","国庆节对于一个大三党来说是一整块难得的时间，出去玩也好，做其他的事也好，都可以随心所欲地安排。想着利用这个时间开发一个社交网站作为学习node的一个总结，不怎么精，也算凑合，无奈还有太多的事儿要做啊。废话不多说，转入正题：\r\n\r\n 今天遇到图片上传的问题，服务器能成功收到图片信息，但如何将进度返给客户端呢？用发送文件是一个post请求，服务器只可能回复一次，而且这个回复主要用来回复前端上传文件的获取地址，不适合再做他用。\r\n \r\n 网上查了查，说是可以用flash做，好吧，表示不会flash..... 目前主要的问题是如何不断地从服务器获得上传进度，socket貌似能做到这一点，问题是不知道上传结束时客户端如何主动断开socket链接，有知道的朋友麻烦告诉一声^-^，于是决定采用轮询了。\r\n 先贴前端部分代码:\r\n **html部分**\r\n \r\n \r\n \r\n\t\t

\r\n\t\t \r\n**JS部分**\r\n\r\n var uploadTag;\r\n\t\t function startRequest()\r\n\t\t {\r\n var json={\"randomID\":uploadTag};\r\n\t\t\t\tsetTimeout(post_data(obj,'/getuploadprocess',dealResponse),1000);\r\n\t\t }\r\n\t\t function dealResponse(json)\r\n\t\t {\r\n\t\t var box=document.getElementById(\"showbox\");\r\n\t\t\t box.innerText=json.progress+'%';\r\n\t\t\t if(json.progress!=100)\r\n\t\t\t {\r\n\t\t\t startRequest();\r\n\t\t\t }\r\n\t\t } \r\n\t\t \r\n//上面这俩个function 组成一个不达目的不罢休的轮询,post_data是个ajax，就不贴了\r\n\r\n\t\t function setTag()\r\n\t\t {\r\n\t\t uploadTag=Math.ceil(Math.random()*1000000);\r\n\t\t var tag=document.getElementById(\"uploadTag\");\r\n\t\t tag.value=uploadTag;\r\n\t\t }\r\n\t\t \r\n//设置随机id,避免搞不清是请求哪个文件的进度\r\n\r\n\t\t function uploadErr(message)\r\n\t\t {\r\n\t\t alert(message);\r\n\t\t }\r\n\t\t \r\n//处理错误，当然这里只是简单alert，没有考虑用户体验，就写简单点吧\r\n\r\n\t\t function uploadEnd(json)\r\n\t\t {\r\n\t\t var obj=JSON.parse(json)\r\n\t\t alert(obj.message)\r\n\t\t }\r\n\t\t \r\n//上传结束的callback，返回图片的获取地址，前端应该将其设置成一个img元素的src属性，也从简了:)\t \r\n ** 后端:**\r\n后端大部分人都是使用的express，然后就顺便设置了app.use(multer(dest:\"\"))解析请求，那可就做不了进度条了，建议把这个设置删了，然后 var formidable=require(\"formidable\");(写在路由模块里)；\r\n代码：\r\n\r\n\t\t var uploadprogress={};//全局变量，存进度\r\n\t\t module.exports=function(app)\r\n\t\t {\r\n\t\t ...........................................................................\r\n\t\t ...........................................................................\r\n\t\t app.post('/uploadimage',function(req,res){\r\n\t\t var id=1;\r\n\t\t var uploadfile;\r\n\t\t var form=new formidable.IncomingForm();//formidable模块的用法自己去github看文档吧\r\n\t\t form.uploadDir='';\r\n\t\t from.keepExtensions=true;\r\n\t\t form.on(\"field\",function(name,value){//设置唯一可标识的id\r\n\t\t id=req.session.user._id+req.body.randomID;//这个value就是表单中文本框的值\r\n\t\t });\r\n\t\t form.on(\"err\",function(err){\r\n\t\t var callback=\"\";\r\n\t\t res.end(callback);//这段文本发回前端就会被同名的函数执行\r\n\t\t })\r\n\t\t from.on(\"progress\",function(bytesRecieved,bytesExpected){\r\n\t\t uploadprogress.id=Math.ceil((bytesRecieved/bytesExpected)*100);//更新进度\r\n\t\t //这里有个id的值是否已经设置的问题，不过没关系，就算仍是最初的1，也只耗一丁点内存\r\n\t\t })\r\n\t\t form.on(\"abort\",function(){\r\n\t\t ............\r\n\t\t })\r\n\t\t form.on(\"file\",function(err,file){\r\n\t\t if(err)\r\n\t\t {\r\n\t\t console.log(err);\r\n var callback=\"\";\r\n\t\t res.end(callback);\t\t\t\r\n\t\t\t\t\t\t}\r\n\t\t uploadfile=file;//记录文件信息\r\n\t\t })\r\n\t\t form.on(\"end\",function(){\r\n\t\t var file=new File()\r\n\t\t .......\r\n\t\t ...... \r\n\t\t file.save();//将文件信息存入数据库，如果是文章里面的图片的话，就没有必要存了，在前端直接设置src就相当于存了\r\n\t\t var fpath=uploadfile.path;\r\n\t\t var callback=\"\";\r\n\t\t res.end(callback);\r\n\t\t })\r\n\t\t \t\t form.parse(req);\r\n\t\t })\r\n\t\t \r\n\t\t app.post('/getuploadprocess',function(req,res){\r\n\t\t var id=req.session.user._id+req.body.randomID;\r\n\t\t var pr;\r\n\t\t if(uploadprogress.id)\r\n \t\t {\r\n\t\t pr=uploadprogress.id;\r\n\t\t }\r\n\t\t else\r\n\t\t {\r\n\t\t pr=0;\r\n\t\t }\r\n\t\t if(pr==100)\r\n\t\t {\r\n\t\t delete uploadprogress.id;\r\n\t\t }\r\n\t\t res.status(200).json({\"progress\":pr});\r\n\t\t })\r\n\t\t }\r\n ok主要的代码已经贴完了，下面来说一下工作的流程，首先由表单提交文件，在确定文件后会自动生成一个随机ID用于标识，这个ID发给后台和user的id组合为文件的标识；后台接受文件上传请求，formidable开始解析文件，主要监听progress事件，由其返回的参数来更新上传进度。在表单点击提交的时候同时触发startRequest函数，向后台获取上传进度，这个请求由/getuploadprogress处理，里面的代码就是简单的响应和清理功能。自此全部结束，前端获得进度后想要以什么方式展现就随看官发挥吧，我就简单展现其百分比了\r\n\r\n PS：如果有大神路过，小弟请教一个问题：这个代码是实现了功能，但获得进度是个长轮询，不知道对服务器来讲压力大不大。。测试时我同时上传俩个400多M的文件，电脑风扇就转个不停。虽然文件上传成功了，但还是担心性能问题（我用本机做的服务器），求大神留下高见！","title","获取文件上传进度","last_reply_at","2015-03-23 13:35:29.982","good",true,"top",32,"visit_count",29022,"2014-10-03 08:19:45.744","author",{"_13":56,"_22":57},"yyrdl","https://avatars1.githubusercontent.com/u/8213509?v=4"]