php+ajax大文件分片上传示例代码

Bertha 。 2024-03-16 12:36 69阅读 0赞

### 代码思路 ###

PHP在上传超大的文件时，不能只让后端[php上传][php]，会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理，文件上传要使用[AJAX][php]的方法，而不是form的submit的方式。

前端把file文件对象按一定的大小分割成一定大小的文件（如按2M或5M来分割），对分割后的文件，一个个的上传到后端去，后端接收到分片文件后,把它们先放到一个临时的目录下，在收到前端完成的数据请求的时候,把临时目录中的文件组装起来成一个新的文件，保存后，把临时目录下的文件删除掉就可以了。

### 示例代码 ###

HTML代码：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>&lt;</code><code>div</code>&nbsp;<code>class</code><code>=</code><code>"a"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>上传&lt;</code><code>input</code>&nbsp;<code>id</code><code>=</code><code>"myfile"</code>&nbsp;<code>type</code><code>=</code><code>"file"</code>&nbsp;<code>name</code><code>=</code><code>"myfile"</code><code>/&gt;</code> <code>&lt;/</code><code>div</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

这里要说明一下，没有使用 submit 上传，使用 ajax上传。

[JS代码][JS]：

<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 </td> 
 <td> <code>&lt;script&gt;</code> <code>$(</code><code>function</code><code>(){ </code> <code>let&nbsp;myfile&nbsp;=&nbsp;document.getElementById(</code><code>"myfile"</code><code>);</code> <code>myfile.onchange&nbsp;=&nbsp;</code><code>function</code><code>(){ </code> <code>let&nbsp;file&nbsp;=&nbsp;myfile.files[0];&nbsp;</code><code>//&nbsp;这里可以得到上传的文件对象</code> <code>let&nbsp;length&nbsp;=&nbsp;1024&nbsp;*&nbsp;1024&nbsp;*&nbsp;5;&nbsp;</code><code>//&nbsp;这里是每一个分片的大小</code> <code>let&nbsp;total_number&nbsp;=&nbsp;Math.ceil(file.size/length);&nbsp;</code><code>//&nbsp;使用进一法，来确定分片的个数</code> <code>let&nbsp;start&nbsp;=&nbsp;0;&nbsp;</code><code>//&nbsp;分片的初始位置</code> <code>let&nbsp;end&nbsp;=&nbsp;length;&nbsp;</code><code>//&nbsp;分片的结束位置</code> <code>let&nbsp;parr&nbsp;=&nbsp;[];&nbsp;</code><code>//&nbsp;这里为promise.all方法准备一个数组</code> <code>for</code><code>(let&nbsp;i&nbsp;=&nbsp;1;i&lt;=total_number;i++){ </code> <code>//&nbsp;这里开始分片，并且把每一个分片上传到服务器</code> <code>let&nbsp;bolb&nbsp;=&nbsp;file.slice(start,end);&nbsp;</code><code>//&nbsp;得到一个分片</code> <code>start&nbsp;=&nbsp;end;&nbsp;</code><code>//&nbsp;调整下一个分片的起始位置</code> <code>end&nbsp;=&nbsp;start+length;&nbsp;</code><code>//&nbsp;调整下一个分片的结束位置</code> <code>if</code><code>(end&nbsp;&gt;&nbsp;file.size){ </code> <code>end=file.size;&nbsp;</code><code>//&nbsp;这里对最后的一个分片结束位置进行调整</code> <code>}</code> <code>let&nbsp;formdata&nbsp;=&nbsp;</code><code>new</code>&nbsp;<code>FormData();&nbsp;</code><code>//&nbsp;创建一个FormData对象，准备传送数据</code> <code>formdata.append(</code><code>"file"</code><code>,blob);&nbsp;</code><code>//&nbsp;将分片数据放入formdata</code> <code>formdata.append(</code><code>"tempfilename"</code><code>,i+</code><code>"_"</code><code>+file.name);&nbsp;</code><code>//&nbsp;同时为这个分片设置一个名称，其中的i帮助后端进行排序处理</code> <code>//&nbsp;formdata组装好之后，调用pro()函数，返回一个promise对象，并把它放入parr数组中，方便后面的promise.all方法使用</code> <code>parr.push(pro(formadata));</code> <code>}</code> <code>//&nbsp;以上for循环结束之后，parr数组中就全部是分片上传的promise的对象了，此时我们使用promise.all方法，等待所有上传都成功执行后，再向服务器发送一个请求，也就是上传完成，让服务器组装分片的请求</code> <code>Promise.all(parr).then(res=&gt;{ </code> <code>if</code><code>(res.length&nbsp;==&nbsp;parr.length){&nbsp;</code><code>//&nbsp;如果返回成功的数组长度和parr的数组长度相等，说明分片全部上传成功</code> <code>//&nbsp;此时对上传接口再次发送请求，同时把上传的文件名带上，方便后台查找要组装的分片文件名，因为是请求同一个上传接口，所以我们还要传一个flag=1表示这是一个数据组装的请求</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.ajax({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:</code><code>"post"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:</code><code>"http://xxx.com/index/upload/getupload"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:{flag:1,filename:file.name},&nbsp;</code><code>//&nbsp;这里flag=1表示上传完成，请求组装，filename表示要组成哪一组文件分片</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:</code><code>function</code><code>(res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(res.length&nbsp;==&nbsp;parr.length){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(111);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>fail:&nbsp;</code><code>function</code>&nbsp;<code>()&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>reject()</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>}</code> <code>})</code> <code>}</code> <code>})</code> <code>//&nbsp;这个函数用来上传分片文件，返回的是一个promise对象，方便后面使用promise.all还判断所有分片是否是上传成功的</code> <code>//&nbsp;这里要说明一下，$.post()是不可以上传文件的，只能用$.ajax()并且要把contentType:false和processData:false带上</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>pro(formData){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>new</code>&nbsp;<code>Promise((resolve,reject)=&gt;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>$.ajax({ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>type:</code><code>"post"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url:</code><code>"http://xxx.com/index/upload/getupload"</code><code>,&nbsp;//&nbsp;后台上传文件的地址</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>data:formData,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>contentType:&nbsp;</code><code>false</code><code>,&nbsp;</code><code>//&nbsp;这个不能少，ajax上传文件是不能少的</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>processData:&nbsp;</code><code>false</code><code>,&nbsp;</code><code>//&nbsp;这个不能少，ajax上传文件必传false</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>success:</code><code>function</code><code>(res){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>resolve(res)</code> <code>&nbsp;&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;&nbsp;</code><code>fail:&nbsp;</code><code>function</code>&nbsp;<code>()&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>reject()</code> <code>&nbsp;&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;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&lt;/script&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

以上就是前端的js核心部分，注释基本就可以看懂了。

[php代码][php 1]：

上面的方法，我本地测试上传了一个 650M的文件，只用的 20秒的时间，没有在服务器上测试过，大家可以按照这个方法试一下。

[php]: http://www.hu6.cc
[JS]: https://www.wdzzz.com/jiaocheng/js/
[php 1]: https://www.wdzzz.com/tags/phpdm/