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

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

2026-03-17 2
[!--dianshu--] C币
VIP折扣
    折扣详情
  • 体验VIP会员

    免费

  • 月卡VIP会员

    免费

  • 年卡VIP会员

    免费

  • 永久VIP会员

    免费

查看演示
下载不了?请联系网站客服提交链接错误!
TAG标签: 安装指导

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

2026-03-17 php教程 9999 2
郑重承诺丨总裁主题提供安全交易、信息保真!
TAG标签:
安装指导
[!--dianshu--] C币
VIP权限详情
    会员权限详情
  • 体验VIP会员

    免费

  • 月卡VIP会员

    免费

  • 年卡VIP会员

    免费

  • 永久VIP会员

    免费

开通VIP尊享优惠特权
立即下载 等待添加 升级会员 最新活动
微信扫码咨询 微信扫码咨询

联系电话:18888888888

进入TA的商铺 联系官方客服
详情介绍

欢迎!我白天是个邮递员,晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都,有条叫做Jack的狗。

代码思路

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

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

示例代码

HTML代码:

<div class="a">    上传<input id="myfile" type="file" name="myfile"/></div>

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

js代码:

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

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

php代码:

<?php// tp5框架public function getUpload(){$tempdir = APP_PATH."../public/tempdir"; // 这里分片的文件指定了一个临时目录,后面会用到$flag = input("flag",0); // 接收参数flag如果没有这个参数就默认为0,如果flag=1,表示要组装分片if($flag == 0){// 这里是上传分片$file = request()->file("file"); // 接收到这个分片$tempfilename = input("tempfilename"); // 接收到这个分片的名称,注意:这个名称中含有排序信息if(!file_exists($tempdir)){mkdir($tempdir,0755,true); // 如果临时目录不存在,则创建一个临时目录}$fileinfo = $file->move($tempdir,$tmpfilename);if($fileinfo){ // 把分片的文件保存在了临时目录中,返回有点简单,可以根据需求返回相应的数据return josn(['error'=>0]);}else{return json(['error'=>1]);}}elseif($flag == 1){// 如果flag为1表示,分片已上传完成了$filename = input("filename");// 通过文件名的字符串匹配,找上所有的分片,返回一个文件路径的数组$fileArr = glob($tempdir."/*".$filename);// 这里的*是一个通配符,将所有的文件名中包含的$filename的文件都找到// 说明一下,$fileArr中的数组的顺序不是我们想要的,所以我们新建一个数组来整理一下顺序$newfileArr = [];foreach($fileArr as $f){    // js前端把文件的名称前加了'序号+_',以下划线来分开并把序号写在key中$fileBaseName = basename($f); // $f是一个个的路径,这里使用basename得到文件名$fileBaseNameSplit = explode("_", $fileBaseName); // 通过下划线分割文件名$newfileArr[$fileBaseNameSplit[0]] = $f; // 构造了一个新的数组,其中数组的key就是顺序号,数组的值就是分片文件的路径}// 分片的序号和路径都准备好了,就可以组装了$num = count($newfileArr); // 得到的所有分片的个数,为后面使用for循环做准备// 开始使用for循环来组装$newfilename = "new-".$filename; // 这里为组装后的文件起一个名字for($i=1; $i<=$num; $i++){            // 这里以追加的方式,把分片文件都写入到了一个文件中            file_put_contents($newfilename,file_get_contents($newfileArr[$i]),FILE_APPEND);        }// ......// 删除临时文件中的分片文件,这里可以使用try catch来判断是否有错误foreach($newfileArr as $fi){unlink($fi);}// 最后给前端返回保存的文件名就可以}}

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

下载地址
  • 提取密码
  • 1561
  • 解压密码
  • DWQwdewq
    立即免费下载
    php+ajax大文件分片上传示例代码
收藏 (15) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 ()

所有文章为演示数据,不提供下载地址,版权归原作者所有,仅提供演示效果!

CMS主题网 php教程 php+ajax大文件分片上传示例代码 /showinfo-48-4-0.html

我们只做高端Wordpress主题开发!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

帝国CMS二次开发 函数文件      PRinterror()/e/class/connect.phpline 132query()/e/class/db_sql.php line 10fetch1()/e/class/db_sql.php line 30fetch()/e/class/db_sql.php line 22checklevel()/e/class/functions.php line 3414insert_dolog()/e/class/functions.php line 3...
#推荐
2026-03-17 14 C币
帝国CMS8.0父子信息调用方      帝国CMS8.0版新增父子信息功能,让一条信息也能成为一个信息、一个栏目、一个专题、甚至一个网站。本文共有四个部分:一、父子信息功能使用流程。二、调用子信息:可以用索引灵动标签调用。三、父子信息列表访问地址的语法说明。四、进阶:调用当前父子信息...
#推荐
2026-03-17 4 C币
帝国CMS判断当前数据库是      有时候我们需要判断数据库是否包含某字段,就可以使用下面这段SQL语法,$fr=$empire-&gt;fetch1(&quot;SELECT COUNT(*) AS column_exists FROM INFORMATION_SCHEMA.COLUMNS WHERE TABLE_NAME = &amp;#39;$infotb&amp;#39; AND COLUMN_NAME = &amp;#39;money&amp;#39;&quot;);if($fr[&amp;...
#推荐
2026-03-17 4 C币
Python开发一个ChatGPT GU      1、首先去下载这个ChatGPT库,用到的库是这个:https://github.com/acheong08/ChatGPT2、安装这个ChatGPT库:pip3 install revChatGPT==0.0.a423、同目录还需要一个“config.json”:{    &quot;session_token&quot;: &quot;&quot;,    &quot;cf_clearance&quot;: &quot;&quot;,    &quot;user_agent&quot;: &quot;
#推荐
2026-03-17 4 C币
Playwright闲鱼智能监控机      项目介绍Playwright闲鱼智能监控机器人项目,基于 Playwright 和AI过滤分析的闲鱼多任务实时监控与智能分析工具,配备了功能完善的 Web 管理界面。可以实时按规则抓取闲鱼商品,垃圾佬的最爱。闲鱼智能监控机器人:https://github.com/dingyufei615/ai-goof...
#推荐
2026-03-17 3 C币
过年给网站加一对灯笼CSS      马上快过年了,给网站加一对红灯笼,这样才有过年的喜庆劲儿。灯笼是代码生成的无需图片,而且还会摆动。使用方法把HTML下面代码粘贴到网页BODY内任意位子都可以。灯笼的位子可以微调.deng-box的left和right数值。CSS代码&lt;!-- 灯笼代码 --&gt;&lt;div class=&quot;de...
#推荐
2026-03-17 3 C币
使用CSS Grid Generator拖      如果你是CSS小白,不会使用复杂的UI框架,又需要开发一个响应式网站,那么我的站长站推荐你使用CSS Grid Generator,直接拖拽网格,就可以立即生成响应式CSS代码,复制到自己项目即可使用。使用方法1、首先根据你的项目需求,生成指定的列数和网格数量2、然后拖到...
#推荐
2026-03-17 3 C币
ajax上传文件进度条功能示      ajax上传文件时,有时比较耗时,需要在界面上显示下进度信息,获取ajaxSettings中的xhr对象,为它的upload属性绑定progress事件的处理函数前端代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf8&quot;&gt;&lt;title&gt;test upload&lt;/title&gt;&lt;!--jquery--&gt;&lt;script src=&quot;h...
#推荐
2026-03-17 3 C币