ZUI+H5大文件分块上传开发

古城微笑少年丶 2024-03-16 12:21 25阅读 0赞

### 前端代码 ###

使用file.slice将文件进行分割，然后分别进行异步上传。

<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 </td> 
 <td> <code>&lt;!DOCTYPE&nbsp;html&gt;</code> <code>&lt;</code><code>html</code><code>&gt;</code> <code>&nbsp;</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>meta</code>&nbsp;<code>name</code><code>=</code><code>"viewport"</code>&nbsp;<code>content</code><code>=</code><code>"width=device-width,&nbsp;initial-scale=1"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>title</code><code>&gt;&lt;%=&nbsp;title&nbsp;%&gt;&lt;/</code><code>title</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;!--&nbsp;zui&nbsp;--&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>"http://zui.sexy/dist/css/zui.min.css"</code>&nbsp;<code>rel</code><code>=</code><code>"external&nbsp;nofollow"</code>&nbsp;<code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>head</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>style</code><code>=</code><code>"margin-top:&nbsp;30px;"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>form</code>&nbsp;<code>method</code><code>=</code><code>"post"</code>&nbsp;<code>enctype</code><code>=</code><code>"multipart/form-data"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>input</code>&nbsp;<code>type</code><code>=</code><code>"file"</code>&nbsp;<code>id</code><code>=</code><code>"fileBig"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>button</code>&nbsp;<code>type</code><code>=</code><code>"submit"</code>&nbsp;<code>class</code><code>=</code><code>"btn&nbsp;btn-primary"</code><code>&gt;提交&lt;/</code><code>button</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>form</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;!--&nbsp;ZUI&nbsp;Javascript&nbsp;依赖&nbsp;jQuery&nbsp;--&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>script</code>&nbsp;<code>src</code><code>=</code><code>"http://zui.sexy/assets/jquery.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;!--&nbsp;ZUI&nbsp;标准版压缩后的&nbsp;JavaScript&nbsp;文件&nbsp;--&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>script</code>&nbsp;<code>src</code><code>=</code><code>"http://zui.sexy/dist/js/zui.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>script</code>&nbsp;<code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$('form').submit(function()&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;file&nbsp;=&nbsp;$(":file")[0].files[0];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;fileName&nbsp;=&nbsp;file.name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;fileSize&nbsp;=&nbsp;file.size;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log('fileSize',fileSize);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;blockSize&nbsp;=&nbsp;0.9*1024*1024;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;num&nbsp;=&nbsp;Math.ceil(fileSize/blockSize);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;start&nbsp;=&nbsp;0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;end&nbsp;=&nbsp;0;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>for(let&nbsp;i=1;i&lt;=num;i++){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>end&nbsp;=&nbsp;blockSize*i;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if(end&nbsp;&gt;&nbsp;fileSize){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>end&nbsp;=&nbsp;fileSize;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;block&nbsp;=&nbsp;file.slice(start,end);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>start&nbsp;=&nbsp;end;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>let&nbsp;fd&nbsp;=&nbsp;new&nbsp;FormData();</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fd.append('block',block);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fd.append('name',fileName);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fd.append('total',num);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fd.append('index',i);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.ajax({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:"upload.php",</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:"POST",</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:fd,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>async:true,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>processData:false,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>contentType:false,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:(res)=&gt;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log('res_'+i+":");</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(res);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&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>return&nbsp;false;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>});</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>script</code><code>&gt;</code> <code>&nbsp;</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 9 10 11 12 13 14 15 16 </td> 
 <td> <code>&lt;?php</code> <code>$name</code>&nbsp;<code>=&nbsp;</code><code>$_POST</code><code>[</code><code>'name'</code><code>];</code> <code>$index</code>&nbsp;<code>=&nbsp;</code><code>$_POST</code><code>[</code><code>'index'</code><code>];</code> <code>$total</code>&nbsp;<code>=&nbsp;</code><code>$_POST</code><code>[</code><code>'total'</code><code>];</code> <code>echo</code>&nbsp;<code>"name:"</code><code>.</code><code>$name</code><code>.PHP_EOL;</code> <code>echo</code>&nbsp;<code>"index:"</code><code>.</code><code>$index</code><code>.PHP_EOL;</code> <code>echo</code>&nbsp;<code>"total:"</code><code>.</code><code>$total</code><code>.PHP_EOL;</code> <code>move_uploaded_file(</code><code>$_FILES</code><code>[</code><code>'block'</code><code>][</code><code>'tmp_name'</code><code>],</code><code>'upload/'</code><code>.</code><code>$name</code><code>.</code><code>"_"</code><code>.</code><code>$index</code><code>);</code> <code>$list</code>&nbsp;<code>=&nbsp;scandir(</code><code>'upload'</code><code>);</code> <code>$num</code>&nbsp;<code>=&nbsp;</code><code>count</code><code>(</code><code>$list</code><code>)-2;</code> <code>echo</code>&nbsp;<code>"cur_num:"</code><code>.</code><code>$num</code><code>.PHP_EOL;</code> <code>if</code><code>(</code><code>$num</code>&nbsp;<code>==&nbsp;</code><code>$total</code><code>){ </code> <code>&nbsp;&nbsp;</code><code>echo</code>&nbsp;<code>"upload&nbsp;done"</code><code>.PHP_EOL;</code> <code>&nbsp;&nbsp;</code><code>echo</code>&nbsp;<code>$cmd</code>&nbsp;<code>=&nbsp;</code><code>"cat&nbsp;upload/'{$name}_'*&nbsp;&gt;&nbsp;upload/'{$name}'"</code><code>;</code> <code>&nbsp;&nbsp;</code><code>shell_exec(</code><code>$cmd</code><code>);</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>