PHP大文件分片上传并带进度条功能示例

梦里梦外; 2024-03-16 11:45 26阅读 0赞

html文件：

<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 68 69 70 71 72 73 74 75 </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>&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code>&nbsp;<code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code>&nbsp;<code>http-equiv</code><code>=</code><code>"X-UA-Compatible"</code>&nbsp;<code>content</code><code>=</code><code>"IE=edge"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>title</code><code>&gt;大文件切割上传带进度条&lt;/</code><code>title</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>link</code>&nbsp;<code>rel</code><code>=</code><code>"stylesheet"</code>&nbsp;<code>href</code><code>=</code><code>""</code><code>&gt;</code> <code>&lt;</code><code>script</code><code>&gt;</code> <code>var&nbsp;xhr&nbsp;=&nbsp;new&nbsp;XMLHttpRequest();//xhr对象</code> <code>var&nbsp;clock&nbsp;=&nbsp;null;</code> <code>function&nbsp;selfile(){ </code> <code>&nbsp;&nbsp;</code><code>clock&nbsp;=&nbsp;window.setInterval(sendfile,1000);</code> <code>}</code> <code>var&nbsp;sendfile&nbsp;=&nbsp;(function&nbsp;(){ </code> <code>&nbsp;&nbsp;</code><code>const&nbsp;LENGTH&nbsp;=&nbsp;1024&nbsp;*&nbsp;1024&nbsp;*&nbsp;10;//每次上传的大小</code> <code>&nbsp;&nbsp;</code><code>var&nbsp;start&nbsp;=&nbsp;0;//每次上传的开始字节</code> <code>&nbsp;&nbsp;</code><code>var&nbsp;end&nbsp;=&nbsp;start&nbsp;+&nbsp;LENGTH;//每次上传的结尾字节</code> <code>&nbsp;&nbsp;</code><code>var&nbsp;sending&nbsp;=&nbsp;false;//表示是否正在上传</code> <code>&nbsp;&nbsp;</code><code>var&nbsp;fd&nbsp;=&nbsp;null;//创建表单数据对象</code> <code>&nbsp;&nbsp;</code><code>var&nbsp;blob&nbsp;=&nbsp;null;//二进制对象</code> <code>&nbsp;&nbsp;</code><code>var&nbsp;percent&nbsp;=&nbsp;0;</code> <code>&nbsp;&nbsp;</code><code>return&nbsp;(function&nbsp;(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//如果有块正在上传，则不进行上传</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if(sending&nbsp;==&nbsp;true){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var&nbsp;file&nbsp;=&nbsp;document.getElementsByName('video')[0].files[0];//文件对象</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//如果sta&gt;file.size，就结束了</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if(start&nbsp;&gt;&nbsp;file.size){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>clearInterval(clock);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>blob&nbsp;=&nbsp;file.slice(start,end);//根据长度截取每次需要上传的数据</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fd&nbsp;=&nbsp;new&nbsp;FormData();//每一次需要重新创建</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fd.append('video',blob);//添加数据到fd对象中</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>up(fd);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//重新设置开始和结尾</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>start&nbsp;=&nbsp;end;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>end&nbsp;=&nbsp;start&nbsp;+&nbsp;LENGTH;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>sending&nbsp;=&nbsp;false;//上传完了</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//显示进度条</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>percent&nbsp;=&nbsp;100&nbsp;*&nbsp;start/file.size;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if(percent&gt;100){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>percent&nbsp;=&nbsp;100;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.getElementById('bar').style.width&nbsp;=&nbsp;percent&nbsp;+&nbsp;'%';</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.getElementById('bar').innerHTML&nbsp;=&nbsp;parseInt(percent)+'%';</code> <code>&nbsp;&nbsp;</code><code>});</code> <code>})();</code> <code>function&nbsp;up(fd){ </code> <code>&nbsp;&nbsp;</code><code>xhr.open('POST','13-slice-upload.php',false);</code> <code>&nbsp;&nbsp;</code><code>xhr.send(fd);</code> <code>}</code> <code>&lt;/</code><code>script</code><code>&gt;</code> <code>&lt;</code><code>style</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>#progress{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:500px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:30px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px&nbsp;solid&nbsp;green;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>#bar{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:0%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:100%;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>background-color:&nbsp;green;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&lt;/</code><code>style</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>h1</code><code>&gt;大文件切割上传带进度条&lt;/</code><code>h1</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>id</code><code>=</code><code>"progress"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>id</code><code>=</code><code>"bar"</code><code>&gt;&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"file"</code>&nbsp;<code>name</code><code>=</code><code>"video"</code>&nbsp;<code>onchange</code><code>=</code><code>"selfile();"</code>&nbsp;<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>

php文件：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>&lt;?php</code> <code>/**</code> <code>&nbsp;</code><code>*&nbsp;大文件切割上传，把每次上传的数据合并成一个文件</code> <code>&nbsp;</code><code>*&nbsp;@author&nbsp;webbc</code> <code>&nbsp;</code><code>*/</code> <code>$filename</code>&nbsp;<code>=&nbsp;</code><code>'./upload/upload.wmv'</code><code>;</code><code>//确定上传的文件名</code> <code>//第一次上传时没有文件，就创建文件，此后上传只需要把数据追加到此文件中</code> <code>if</code><code>(!</code><code>file_exists</code><code>(</code><code>$filename</code><code>)){ </code> <code>&nbsp;&nbsp;</code><code>move_uploaded_file(</code><code>$_FILES</code><code>[</code><code>'video'</code><code>][</code><code>'tmp_name'</code><code>],</code><code>$filename</code><code>);</code> <code>}</code><code>else</code><code>{ </code> <code>&nbsp;&nbsp;</code><code>file_put_contents</code><code>(</code><code>$filename</code><code>,</code><code>file_get_contents</code><code>(</code><code>$_FILES</code><code>[</code><code>'video'</code><code>][</code><code>'tmp_name'</code><code>]),FILE_APPEND);</code> <code>}</code> <code>?&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>