【小白求问】关于大文件上传显示进度的问题
发布于 9 年前 作者 jioyou 6652 次浏览 最后一次编辑是 8 年前 来自 问答

我看formidable这个模块有个events可以显示进度，试了一下

11111.png

22222.png

现在把进度打印出来了，但是怎么样才能显示在前面的页面上呢？ 有没有这种现成的方法？ 哪位写过，麻烦指点一下思路

26 回复

通过json 返回给前端啊，前端通过progress event 监听返回的数据！然后显示进度

正确的做法是使用ajax2上传，支持进度条显示。

@gzhangzy 是指ajax xhr2么？要怎么跟node后台交互？能举个例子么

@sumaolin 就是不清楚怎么把json返回给前端，这里能说详细点么

你要是不清楚就不好讲了。搜搜ajax2上传文件，有很多的。只使用原生的，别使用jquery 。

根本就不是在后端运行progress，是前端浏览器中ajax2会触发progress事件。

@gzhangzy 不是很理解，求代码或者链接。。。。

看最后js就行了

这是jquery版的，原生的自己找吧。

我觉得你这个程序应该是可以在浏览器中运行的，因为显示了post。

@gzhangzy 问题补充 哥，麻烦在帮看一下，您发的那个JAVA的我看不懂，我之后又想了一下，打算在后台把进度赋值给session，然后前台写个定时器，在上传的同时，循环去读session。感觉…理论上可以行得通，但是不知道为什么给session赋值失败了。应该是哪写的不对。您能劳驾给看一下么，再次谢谢您的帮助。

根本不行。靠后台传进度，速度都跟不上。

ajax 有个upload.onprogress ，写起来没几行就实现了

0000.png 试了一下upload.onprogress，可行。但是找不到结束标志， 看网上说定义onload就行，可是onload里一次都没走，刚开始进onloadstart，100%的时候没反应，等了半天，然后跳一下onreadystatechange和onloadend，这里不知道该怎么处理，是应该后台回传什么么？后台的写法在11楼的问题补充里，麻烦在帮看一下，十分感谢

@jioyou 具体的也没弄过，原理和@gzhangzy 说的一个思路，以前看过个插件webuploader 感觉里面就实现了进度条的功能，你可以搜索参考看下

@jioyou xhr.upload.onprogress 这句没错。就是这句管进度条。你指的onloadstart onloadend和进度条没关系。 在upload.onprogress 中加显示代码。

@jioyou onreadystatechange 可以知道上传结束，在其中 this.readyState===2 时上传结束。

@jioyou 只保留 upload.onprogress 和 onreadystatechange 。onload onloadstart onloadend 这三个是管下载的，删除这些代码。这样你就能解决了。

@jioyou 上传进度条和后台没有任何关系！你要是总纠结在这里，这个问题就解决不了了。

ajax2是什么，怎么搜不出来

@gzhangzy 和后台还是有一点关系的。untitled2.png

ajax 有两版。 ajax2是 https://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html?cm_mc_uid=92502985777514600913990&cm_mc_sid_50200000=1461739594 这个链接。

@kidbai 呵呵，你说对了。content-type responseType 是需要设置对的，要不得不到正确的数据。我说没任何关系是指和进度条显示没有任何关系。

@gzhangzy 终于解决了，之前后台没写回传值。。。return完了，前台XHR.responseText和XHR.response都有反应了，onreadystatechange 也能接收值了。 form.on(‘end’, function() { console.log(“end”); res.writeHead(200, { “Content-Type”: “text/plain” }); return res.end(newname); });

@kidbai 解决了，发一串200的串回去就好了

@wodog 一开始也不知道是啥，搜XMLHttpRequest这个，应该是包含关系

回到顶部