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

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

11111.png

22222.png

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

26 回复

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

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

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

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

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

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

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

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

@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这个,应该是包含关系

回到顶部