ajax上传文件进度条功能示例代码

港控/mmm° 2024-03-16 12:36 12阅读 0赞

[AJAX][][上传文件][AJAX]时，有时比较耗时，需要在界面上显示下进度信息，获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数

### 前端代码 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 </td> 
 <td> <code>&lt;!DOCTYPE&nbsp;html&gt;</code> <code>&lt;</code><code>html</code><code>&gt;</code> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>meta</code>&nbsp;<code>charset</code><code>=</code><code>"utf8"</code><code>&gt;</code> <code>&lt;</code><code>title</code><code>&gt;test&nbsp;upload&lt;/</code><code>title</code><code>&gt;</code> <code>&lt;!--jquery--&gt;</code> <code>&lt;</code><code>script</code>&nbsp;<code>src</code><code>=</code><code>"https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;</code><code>script</code><code>&gt;</code> <code>//页面加载完时加载此函数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>window.onload&nbsp;=&nbsp;function()&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$('#uploadBtnId').click(function(e)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$('#resultId').html();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//使用FormData对象来提交整个表单，它支持文件的上传</code> <code>&nbsp;&nbsp;&nbsp;</code><code>var&nbsp;formData=new&nbsp;FormData(document.getElementById("myFormId"));</code> <code>&nbsp;&nbsp;&nbsp;</code><code>formData.append("ddd",&nbsp;10);&nbsp;//也可使用append追加数据</code> <code>$.ajax(</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:&nbsp;'do_upload.php',</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:&nbsp;formData,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>contentType:&nbsp;false,&nbsp;//false:&nbsp;自动加上正确的Content-Type</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>processData:&nbsp;false,&nbsp;&nbsp;//false：&nbsp;避开jQuery对&nbsp;formdata&nbsp;的默认处理</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>enctype:&nbsp;'multipart/form-data',</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:&nbsp;"POST",</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>complete:function(res)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:&nbsp;function&nbsp;(res,&nbsp;status)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code> <code>$('#resultId').html(res);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>error:&nbsp;function(res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//错误处理</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>xhr:&nbsp;function(){&nbsp;//获取ajaxSettings中的xhr对象，为它的upload属性绑定progress事件的处理函数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var&nbsp;myXhr&nbsp;=&nbsp;$.ajaxSettings.xhr();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if(myXhr.upload){&nbsp;//检查upload属性是否存在</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//绑定progress事件的回调函数</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$('#progressId').text();&nbsp;//清空</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>myXhr.upload.addEventListener('progress',&nbsp;function(e)&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if&nbsp;(e.lengthComputable)</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var&nbsp;percent&nbsp;=&nbsp;"上传进度："&nbsp;+&nbsp;e.loaded/e.total*100&nbsp;+&nbsp;"%";</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$('#progressId').text(percent);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>false);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return&nbsp;myXhr;&nbsp;//xhr对象返回给jQuery使用</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&lt;</code><code>form</code>&nbsp;<code>id</code><code>=</code><code>"myFormId"</code>&nbsp;<code>onsubmit</code><code>=</code><code>"return&nbsp;false"</code><code>&gt;&nbsp;</code><code>&lt;!--onsubmit阻止点击按钮后浏览器自动提交表单--&gt;</code> <code>文件1：&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"file"</code>&nbsp;<code>name</code><code>=</code><code>"file1"</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>文本：&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"text"</code>&nbsp;<code>name</code><code>=</code><code>"text1"</code><code>&gt;&lt;</code><code>br</code><code>&gt;</code> <code>&lt;</code><code>button</code>&nbsp;<code>id</code><code>=</code><code>"uploadBtnId"</code><code>&gt;点击上传&lt;/</code><code>button</code><code>&gt;</code> <code>&lt;/</code><code>form</code><code>&gt;</code> <code>&lt;</code><code>p</code>&nbsp;<code>id</code><code>=</code><code>"progressId"</code><code>&gt;&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;</code><code>p</code>&nbsp;<code>id</code><code>=</code><code>"resultId"</code><code>&gt;&lt;/</code><code>p</code><code>&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

### 后端代码 ###

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 </td> 
 <td> <code>&lt;?php</code> <code>//演示用，仅显示下上传上来的数据</code> <code>echo</code>&nbsp;<code>"_FILES&lt;br&gt;"</code><code>;</code> <code>echo</code>&nbsp;<code>var_dump(</code><code>$_FILES</code><code>);</code> <code>echo</code>&nbsp;<code>"&lt;br&gt;&lt;br&gt;_POST&lt;br&gt;"</code><code>;</code> <code>echo</code>&nbsp;<code>var_dump(</code><code>$_POST</code><code>);</code> <code>echo</code>&nbsp;<code>"&lt;br&gt;"</code><code>;</code> <code>?&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

[AJAX]: http://hu6.cc