欢迎光临 - 我的站长站,本站所有资源仅供学习与参考,禁止用于商业用途或从事违法行为!

php教程

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

php教程 我的站长站 2022-12-20 共44人阅读

代码思路

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); // 将分片数据放入formdata
formdata.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秒的时间,没有在服务器上测试过,大家可以按照这个方法试一下。

相关推荐
  • 上传文件
  • php上传
  • 大文件上传
  • AJAX
  • 分片上传
  • nginx宝塔面板上传文件环境配置方法

    在使用nginx系统的宝塔面板开发上传或下载文件功能时,需要首先要配置下载nginx或PHP的参数。否则上传下载大文件时,总是报错,上传小一点的文件,就不报错。修改nginx配置打开nginx管理界面,看到“性能调整”,主要修改连接超时、最大上传文件大小,其他的也可...

    宝塔面板 55 1年前
  • DISCUZ升级后不显示“选择文件上传”按钮

    小编自己的discuz论坛由于不是最新版本,每次登陆论坛都会频繁的有升级提示,这次由于小编手贱了一下下,点击了升级flash player 14。最终导致小编的论坛中就再也看不到:选择文件上传“那个按钮了,图片添加到帖子内容中上方没有:选择文件上传”。这个解决方...

    discuz教程 384 7年前
  • 宝塔面板修改PHP文件上传大小
    宝塔面板修改PHP文件上传大小

    宝塔面板修改PHP文件上传大小很简单,直接打开宝塔面板WEB端进入软件商店选择已经安装且正在使用的PHP版本号点击设置->配置文件搜索post_max_size修改后面的值(自己需要多少就改成多少,切勿过大,防止...

    宝塔面板 379 3年前
  • PHP文件上传示例代码

    第一步,建立上传文件的表单。<html><body><form action="upload_file.php" method="post"enctype="multipart/form-data"><label for="file">Filename:</label><input type="file" name="file&qu...

    php教程 36 3年前
  • PHP新手必学文件上传下载实例

    都知道PHP无非就是增删改查,学会了增删改查就入门了PHP,我的站长站分享一篇PHP新手必学文件上传下载实例,快来学习吧。主页index.php<html><head><title>图片操作</title><style>#contains {width: 500px;margin: 0 auto;text-align: center;color: #0F...

    php教程 45 3年前
  • php上传大文件必备配置方法

    项目要求如果你的项目需要用到大文件上传或下载功能,就必须首先修改PHP的配置才行,否则上传或下载操作就会超时,操作失败。操作步骤打开php配置文件php.ini,首先找到; file uploads ;区域,有影响文件上传的以下几个参数:file_uploads = on ;//是否允许...

    php教程 52 1年前
  • 百度编辑器上传word转html

    后台上传word转html到编辑器中,编辑器是使用的百度编辑器,先在页面合适的位置写个上传框<button type=”button” name=”fileword” id=”upload-fileword”>上传word文件</button>前端用的layui框架,不需要写提示框,图个方便,大家自行选择<script>layui...

    php教程 78 2年前
  • jQuery+PHP实现简单的图片上传功能

    图片上传思路:通过ajax实现图片上传,然后把PHP返回的图片地址,加入到隐藏字段中,最后通过表单提交给后台PHP,代码如下HTML代码 zimg.html文件:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, init...

    php教程 77 3年前
  • PHP新手必学文件上传下载实例

    都知道PHP无非就是增删改查,学会了增删改查就入门了PHP,我的站长站分享一篇PHP新手必学文件上传下载实例,快来学习吧。主页index.php<html><head><title>图片操作</title><style>#contains {width: 500px;margin: 0 auto;text-align: center;color: #0F...

    php教程 45 3年前
  • 京东图床上传api接口源码

    API接口源码<?phpif (class_exists(&#39;CURLFile&#39;)) { // php 5.5$post[&#39;file&#39;] = new \CURLFile(realpath($_FILES[&#39;Filedata&#39;][&#39;tmp_name&#39;]));} else {$post[&#39;file&#39;] = &#39;@&#39;....

    php教程 148 3年前
  • php+ajax大文件分片上传示例代码

    代码思路PHP在上传超大的文件时,不能只让后端PHP上传,会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理,文件上传要使用ajax的方法,而不是form的submit的方式。前端把file文件对象按一定的大小分割成一定大小的文件(如按2M或5M来分割),对...

    php教程 44 1年前
  • 宝塔面板环境上传大文件失败配置方法

    宝塔面板环境上传100M大小的文件,在上总是报错,但是在本地可以正常上传。上传小一点的文件,就不报错。代码和nginx和php的配置文件都设置了150M,超时时间也设置了,应该没啥问题。但就是报错。百度好久,网上说的答案都试了,没效果。解决方法1、fread()的方法...

    宝塔面板 184 1年前
  • php上传大文件必备配置方法

    项目要求如果你的项目需要用到大文件上传或下载功能,就必须首先修改PHP的配置才行,否则上传或下载操作就会超时,操作失败。操作步骤打开php配置文件php.ini,首先找到; file uploads ;区域,有影响文件上传的以下几个参数:file_uploads = on ;//是否允许...

    php教程 52 1年前
  • Nginx上传大文件超时设置方法

    在使用Nginx上传大文件时,需要先设置下Nginx的配置,否则就会超时。推荐修改参数client_header_timeout:读取请求头的超时时间,若超过所设定的大小,返回408错误。client_body_timeout:读取请求实体的超时时间,若超过所设定的大小,返回413错误。proxy_connect_...

    服务器配置 143 1年前
  • file.slice大文件上传新方法

    上传大文件还在苦心整合第三方插件吗,现在HTML5出了一个新方法。我们一起来看看利用file.slice上传大文件是多么简单吧。示例代码let file = $(":file")[0].files[0]; let fileSize = file.size; let blockSize = 20*1024; let num = Math.ceil(fi...

    js教程 29 1年前
  • 帝国CMS表单如何使用ajax提交?

    自己做了个表单提交,但是form的转跳页面提示,想做成ajax根据返回信息提示。ajax提交思路代码var data = $(&#39;#form&#39;).serialize(), url = $(&#39;#form&#39;).attr(&#39;action&#39;); $.ajax({ method:"POST...

    帝国cms教程 280 4年前
  • wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]
    wordpress Ajax无限加载插件-Quick Ajax2.3.1[英文版]

    Quick Ajax插件说明使用此插件,你可以在你的主题里实现无限加载文章来代替传统的分页模式。提供多种列表模式:瀑布流、传统文章模式、时间轴等。wordpress加载主要功能外观设置选择布局:经典(列表)或...

    wordpress插件 493 4年前
  • wordpress实现文章的ajax无限加载

    刚学习wordpress 写一个网站的文章的无限加载,本来想的好难啊,但是真的自己写了之后感觉真的挺简单的,所以啊一定要做一下小小的总结:首先你要确定你的wordpress的jQuery功能能用你可以在header.php里wp_head();前面加上wp_enqueue_script(&#39;jquery&#...

    wordpress教程 224 4年前
  • dedecms ajax下拉搜索插件
    dedecms ajax下拉搜索插件

    织梦CMS下拉搜索插件效果图织梦CMS下拉搜索插件安装步骤1、打开你的网站首页模板,在</head>之前加入<script language="javascript" type="text/javascript" src="{dede:global.cfg_templets_skin...

    织梦cms插件 574 4年前
  • 帝国CMS二级联动插件(ajax下拉列表)
    帝国CMS二级联动插件(ajax下拉列表)

    帝国CMS二级联动插件(ajax下拉列表)效果: 使用方法: 将下拉外表关联字段的输入表单替换html代码和投稿表单替换为 <script src="/j...

    帝国cms插件 2218 9年前
  • 大文件分片上传 / 下载限速解决方案

    分片上传将需要上传的文件按照一定的分割规则,分割成相同大小的数据块;初始化一个分片上传任务,返回本次分片上传唯一标识;按照一定的策略(串行或并行)发送各个分片数据块;发送完成后,服务端根据判断数据上传是否完整,如果完整,则进行数据块合成得到原始文件。...

    php教程 40 1年前
  • HTML5实现大文件分片上传

    上传大文件一直是个比较头疼的问题,一是上传时间长,中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默认只能接收小于4MB的附件。比较理想的方案是能够把大文件分片,一片一片的传到服务端,再...

    js教程 20 1年前
  • php+ajax大文件分片上传示例代码

    代码思路PHP在上传超大的文件时,不能只让后端PHP上传,会容易上传到一半内测益处失效。需要前端要和后端相互配合一起来处理,文件上传要使用ajax的方法,而不是form的submit的方式。前端把file文件对象按一定的大小分割成一定大小的文件(如按2M或5M来分割),对...

    php教程 44 1年前
  • Vue文件切片上传,file对象的slice使用方法

    1. file对象介绍size 表示二进制对象的大小type 表示二进制对象的类型slice 方法 分割文件2. file.slice介绍第一个参数startByte表示文件起始读取Byte字节第二个参数则是结束读取字节文件切片上传// 文件切片大小定为1MBlet idx = 1;const bytesPer...

    js教程 59 1年前
  • PHP大文件分片上传并带进度条功能示例

    html文件:<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>大文件切割上传带进度条</title> <link rel="stylesheet" href...

    php教程 48 1年前