使用jQuery的文件上传进度条

Question

使用jQuery的文件上传进度条

我正在尝试在我的项目中实现Ajax文件上传功能。为此，我使用jQuery；我的代码使用Ajax提交数据。我还想实现一个文件上传进度条。我该怎么做？有没有方法来计算已经上传了多少，这样我就可以计算上传的百分比并创建一个进度条了吗？

Answer 1

这个问题与jQuery表单插件..如果您正在寻找纯jQuery解决方案，从这里开始..没有针对所有浏览器的总体jQuery解决方案。所以你必须使用插件。我在用Drozone.js，对于较旧的浏览器来说，这是一个很容易的退路。你喜欢哪个插件取决于你的需求。外面有很多比较好的帖子。从实例:jQuery：$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bar&nbsp;=&nbsp;$('.bar'); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;percent&nbsp;=&nbsp;$('.percent'); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;status&nbsp;=&nbsp;$('#status'); &nbsp;&nbsp;&nbsp;&nbsp;$('form').ajaxForm({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;beforeSend:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status.empty(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;percentVal&nbsp;=&nbsp;'0%'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.width(percentVal); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;percent.html(percentVal); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uploadProgress:&nbsp;function(event,&nbsp;position,&nbsp;total,&nbsp;percentComplete)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;percentVal&nbsp;=&nbsp;percentComplete&nbsp;+&nbsp;'%'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bar.width(percentVal); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;percent.html(percentVal); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;complete:&nbsp;function(xhr)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;status.html(xhr.responseText); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;});});HTML：<form&nbsp;action="file-echo2.php"&nbsp;method="post"&nbsp;enctype="multipart/form-data"> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="file"&nbsp;name="myfile"><br> &nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="submit"&nbsp;value="Upload&nbsp;File&nbsp;to&nbsp;Server"></form><div&nbsp;class="progress"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="bar"></div&nbsp;> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="percent">0%</div&nbsp;></div><div&nbsp;id="status"></div>你必须用CSS来设计进度栏.。

Answer 2

我只在jQuery中这样做：$.ajax({ &nbsp;&nbsp;xhr:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;xhr&nbsp;=&nbsp;new&nbsp;window.XMLHttpRequest(); &nbsp;&nbsp;&nbsp;&nbsp;xhr.upload.addEventListener("progress",&nbsp;function(evt)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(evt.lengthComputable)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;percentComplete&nbsp;=&nbsp;evt.loaded&nbsp;/&nbsp;evt.total; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;percentComplete&nbsp;=&nbsp;parseInt(percentComplete&nbsp;*&nbsp;100); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(percentComplete); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(percentComplete&nbsp;===&nbsp;100)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;false); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;xhr; &nbsp;&nbsp;}, &nbsp;&nbsp;url:&nbsp;posturlfile, &nbsp;&nbsp;type:&nbsp;"POST", &nbsp;&nbsp;data:&nbsp;JSON.stringify(fileuploaddata), &nbsp;&nbsp;contentType:&nbsp;"application/json", &nbsp;&nbsp;dataType:&nbsp;"json", &nbsp;&nbsp;success:&nbsp;function(result)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;console.log(result); &nbsp;&nbsp;}});

Answer 3

我在我的项目中使用了以下内容。你也可以试试。ajax&nbsp;=&nbsp;new&nbsp;XMLHttpRequest();ajax.onreadystatechange&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(ajax.status)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(ajax.status&nbsp;==&nbsp;200&nbsp;&&&nbsp;(ajax.readyState&nbsp;==&nbsp;4)){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//To&nbsp;do&nbsp;tasks&nbsp;if&nbsp;any,&nbsp;when&nbsp;upload&nbsp;is&nbsp;completed &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}}ajax.upload.addEventListener("progress",&nbsp;function&nbsp;(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;percent&nbsp;=&nbsp;(event.loaded&nbsp;/&nbsp;event.total)&nbsp;*&nbsp;100; &nbsp;&nbsp;&nbsp;&nbsp;//**percent**&nbsp;variable&nbsp;can&nbsp;be&nbsp;used&nbsp;for&nbsp;modifying&nbsp;the&nbsp;length&nbsp;of&nbsp;your&nbsp;progress&nbsp;bar. &nbsp;&nbsp;&nbsp;&nbsp;console.log(percent);});ajax.open("POST",&nbsp;'your&nbsp;file&nbsp;upload&nbsp;link',&nbsp;true);ajax.send(formData);//ajax.send&nbsp;is&nbsp;for&nbsp;uploading&nbsp;form&nbsp;data.